关于ios手机上拉和下拉到底部和顶部的橡皮筋问题

原创 柠-檬℃ 随笔 ios 120阅读 2019-04-11 17:55:39 举报

之前遇到一个问题,就是写了一个正常的移动端首页,底部是导航,上面的是内容,在安卓手机是页面滑动到底部的时候,不会再滑动的,但是问题就出现在ios手机中。
页面正常布局是,导航是position:fixed,z-index:9,其他整体布局差不多是position:relative,z-index:1
(1.)滑动到底部的时候,ios手机还可以再次滑动,以至于把底部的导航条越过去了,导致看不到导航条,影响用户体验。
网上搜到的解决办法有几种
1.如果页面是没有滚动条的,可以使用下面的js代码

这几行代码是禁止整个页面的滑动,所以很好理解,下面看第二种
2.页面有很多内容,存在滚动条
那么解决办法就是,
在页面的最外层设置

然后再去看ios的页面,成功阻止了这种橡皮筋效果
这里的height和width移动要设置100%;允许overflow-y:auto

成功记录成功,这样我妈就再也不怕我因为这个问题加班三小时了

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复