如题, 如何防止 iOS 的上拉下拉回弹效果, 网上找了很多案例, 也都不是最有效的解决办法
希望的结果是, 比如说一个常规的上中下布局, 上面是一个 固定定位的titlebar 中间是内容区, 底部是 固定定位的 navbar. 希望页面在滚动的时候 titlebar和 navbar 不要出现奇怪的问题, 比如回弹, 在比如多拉一些的时候底色会覆盖定位元素
如题, 如何防止 iOS 的上拉下拉回弹效果, 网上找了很多案例, 也都不是最有效的解决办法
希望的结果是, 比如说一个常规的上中下布局, 上面是一个 固定定位的titlebar 中间是内容区, 底部是 固定定位的 navbar. 希望页面在滚动的时候 titlebar和 navbar 不要出现奇怪的问题, 比如回弹, 在比如多拉一些的时候底色会覆盖定位元素
10 回答11.1k 阅读
6 回答3k 阅读
5 回答4.8k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.6k 阅读✓ 已解决
3 回答5.1k 阅读✓ 已解决
3 回答1.8k 阅读✓ 已解决
问题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内) 可以保持沉浸式体验. 而且也不在会有滚动被扯下来的问题了.