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

最新推荐文章于 2024-07-25 18:00:29 发布

不吃肥肉的小潘哥

最新推荐文章于 2024-07-25 18:00:29 发布

阅读量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>

<button id="btn">点击打开弹窗</button>

</div>

<div class="box2 hide"> <div class="box2-1"> <p class="tick"> 感谢关注！！ <button id='btn2'>点击关闭弹窗</button> </p> </div>

</div>

$(function(){

var ST;

$("#btn").click(function(event) {

$('body').bind("touchmove",function(e){e.preventDefault();});

ST = $("body").scrollTop()

alert(ST)

$(".box2").removeClass('hide').css('top', ST); });

$("#btn2").click(function(event) { $(".box2").addClass('hide')

$("body").unbind("touchmove");

});

})

</script>

</body>

</html>

之前遇到过页面用了position:fixed；也导致苹果手机滑动不流畅问题也是加了-webkit-overflow-scrolling:touch后流畅性好了很多，但是网上也还有关于这个属性带来的小bug，大家可以去尝试看看

不吃肥肉的小潘哥

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于 -webkit-overflow-scrolling:touch 的小bug

最近在写页面时遇到一个页面长度刚刚超过手机高度一点，所以页面这时是可以上下滑动的，在安卓手机上滑动很流畅，但是在苹果手机上下滑动时会出现卡顿回弹等现象导致不流畅；故我给body加了body{ -webkit-overflow-scrolling:touch; } 此时苹果手机滑动也流畅了，但是带来一个bug，页面中我有一处弹窗，弹窗的高度是刚好100%的，而且弹窗出现底部内容是不能滑动的，
复制链接

扫一扫