移动端布局问题 防止 iOS 弹性下拉上拉

如题, 如何防止 iOS 的上拉下拉回弹效果, 网上找了很多案例, 也都不是最有效的解决办法

希望的结果是, 比如说一个常规的上中下布局, 上面是一个 固定定位的titlebar 中间是内容区, 底部是 固定定位的 navbar. 希望页面在滚动的时候 titlebar和 navbar 不要出现奇怪的问题, 比如回弹, 在比如多拉一些的时候底色会覆盖定位元素

阅读 5.6k
2 个回答

问题1

问题已解决, 在移动端fixed 定位, 给最外层 overflow: hidden 会出现神器 bug, 比如一个传统布局上面 titlebar 下面 navbar 中间内容区. 上下都是采用 fixed 定位, 这样上啦下拉会导致拉出白边遮挡了 titlebar 或者 navbar. 原因就是这个 overflow 导致的. 去掉就能避免这个问题.
可以搜下移动端布局, sf 上有一篇文章详细说明了.

问题2

还有回弹, 起因是因为用的 H5+Cordova 做的 app, 因为 iOS 的回弹导致 titlebar 跟 navbar 无法定在想要的位置. 处理方式一是可以整体禁用滑动, 采用 betterscroll 类似的滚动插件, 这样做的问题是太过于麻烦了, 所有需要滚动的地方都需要采用 betterscroll 来处理. 想要保持原生滚动的同时, 拉上下拉加载这种再采用 betterscroll. 目前的处理方式是禁用iOS 的原生回弹效果 这样处理后 app 整体能够使用原生滚动(浏览器自带滚动) 并且在浏览器(非 app内) 可以保持沉浸式体验. 而且也不在会有滚动被扯下来的问题了.

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题