关于ios手机上拉和下拉到底部和顶部的橡皮筋问题
之前遇到一个问题,就是写了一个正常的移动端首页,底部是导航,上面的是内容,在安卓手机是页面滑动到底部的时候,不会再滑动的,但是问题就出现在ios手机中。
页面正常布局是,导航是position:fixed,z-index:9,其他整体布局差不多是position:relative,z-index:1
(1.)滑动到底部的时候,ios手机还可以再次滑动,以至于把底部的导航条越过去了,导致看不到导航条,影响用户体验。
网上搜到的解决办法有几种
1.如果页面是没有滚动条的,可以使用下面的js代码
document.body.addEventListener('touchmove', function (e) {
e.preventDefault() // 阻止默认的处理方式(阻止下拉滑动的效果)
}, { passive: false }) // passive 参数不能省略,用来兼容ios和android
这几行代码是禁止整个页面的滑动,所以很好理解,下面看第二种
2.页面有很多内容,存在滚动条
那么解决办法就是,
在页面的最外层设置
.wrapper{
width:100%;
height:100%;
position: fixed;
z-index:1;
overflow-y:auto;
}
然后再去看ios的页面,成功阻止了这种橡皮筋效果
这里的height和width移动要设置100%;允许overflow-y:auto
成功记录成功,这样我妈就再也不怕我因为这个问题加班三小时了
不怕打不死的流氓,就怕耍流氓的流氓