关于 -webkit-overflow-scrolling:touch 的小bug

最新推荐文章于 2020-05-25 14:49:18 发布

不吃肥肉的小潘哥

最新推荐文章于 2020-05-25 14:49:18 发布

阅读量9.1k

点赞数

文章标签： -webkit-overflow-scr bug

本文链接：https://blog.csdn.net/pan396365044/article/details/53943668

版权

最近在写页面时遇到一个页面长度刚刚超过手机高度一点，所以页面这时是可以上下滑动的，在安卓手机上滑动很流畅，但是在苹果手机上下滑动时会出现卡顿回弹等现象导致不流畅；故我给body加了body{ -webkit-overflow-scrolling:touch; } 此时苹果手机滑动也流畅了，但是带来一个bug，页面中我有一处弹窗，弹窗的高度是刚好100%的，而且弹窗出现底部内容是不能滑动的，在没给body加之前是正常的，但是加了后苹果手机弹窗的高度并没有100%全屏，大约是70%左右而且位置错乱了并且底部内容可以滑动；解决办法我用srollTop()和bind()结合，当点击弹窗按钮时先拿到当前页面body的scrollTop()，然后赋值给弹窗盒子的top 如下：

<!DOCTYPE html>

<head>

</script>

html,body{width: 100%;height: auto;overflow-x: hidden;}

body{ -webkit-overflow-scrolling:touch; }

.box{width: 100%;height: auto;background: pink;}

.div1{width:80%;height:230px;margin-left:10%;margin-bottom: 3%;background:orange;} button{width:80%;height:50px;background:yellow;} .box2{width:100%;height:100%;background:rgba(0,0,0,0.6);overflow: hidden;position: absolute;left:0%;top:0%;z-index: 100;}

.box2-1{width:100%;height:100%;overflow: hidden;position: relative;} .tick{width:80%;height:30%;background:#fff;border-radius: 5px;position: absolute;;left:50%;-webkit-transform: translateX(-50%);top:30%;font-size: 25px;text-align: center;color:#f40;padding-top:7%;box-sizing: border-box;} #btn2{font-size: 25px;padding:3%;margin-top:10%;margin-left:0%;color:#f40;background:yellow;}

.hide{display:none;}

</style>

</head>

<body>