您的位置：首页 > 其它

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

2016-12-30 15:28 330 查看

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

<!DOCTYPE
html>

<html

lang="en">

<head>

<meta

charset="UTF-8"

/>

<meta

name="viewport"

content="width=device-width,
user-scalable=no, initial-scale=1.0, maximum-scale=1.0,
minimum-scale=1.0"

/>

<meta

name="apple-mobile-web-app-capable"

content="yes"

/>

<meta

name="apple-mobile-web-app-status-bar-style"

content="black"

/><title>叫我小潘哥</title>

<link

rel="stylesheet"

type="text/css"

href="css/reset.css"

/>

<script

type="text/javascript"

src="js/jquery-1.9.1.min.js">

</script>

<style

type="text/css">

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>

<
db55
/span><body>

<div

class="box">

<div

class="div1"></div>

<div

class="div1"></div>

<div

class="div1">

<button

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

</div>

</div>

<div

class="box2 hide">

<div

class="box2-1">

<p

class="tick">
感谢关注！！

<button

id='btn2'>点击关闭弹窗</button>

</p>

</div>

</div>

<script

type="text/javascript">

$(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，大家可以去尝试看看

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航