资讯专栏INFORMATION COLUMN

flex禁止ios微信浏览器回弹机制

mzlogin / 2418人阅读

摘要:问题描述由于微信游览器存在回弹机制,在下拉滚动的时候会把整个页面下拉出现由提供字眼问题复现解决思路把整个或者用固定在浏览器的可视区域范围内,内容区域滚动的话需要使用滚动插件,在这里我用的是的滚动组件,如果使用是不会滚动的代码样式结构

问题描述:由于微信游览器存在回弹机制,在html body下拉滚动的时候会把整个页面下拉出现由XXX提供字眼

问题复现:

解决思路:把整个html或者body用flex固定在浏览器的可视区域范围内,内容区域滚动的话需要使用滚动插件,在这里我用的是mui的滚动组件,如果使用overflow: auto是不会滚动的

代码:

css样式

    

html结构

  • Item 1
  • Item 2
  • Item 3
  • Item 1
  • Item 2
  • Item 3
  • Item 1
  • Item 2
  • Item 3
  • Item 1
  • Item 2
  • Item 3
  • Item 1
  • Item 2
  • Item 3
  • Item 1
  • Item 2
  • Item 3

js初始化滚动组件


实现效果

小瑕疵是:从顶部向下滑动 停留一下会出现底部空白,前提是有滚动区域,在ios12.1.4测试会出现,在较低版本又不会。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/53893.html

相关文章

  • flex禁止ios微信览器回弹机制

    摘要:问题描述由于微信游览器存在回弹机制,在下拉滚动的时候会把整个页面下拉出现由提供字眼问题复现解决思路把整个或者用固定在浏览器的可视区域范围内,内容区域滚动的话需要使用滚动插件,在这里我用的是的滚动组件,如果使用是不会滚动的代码样式结构 问题描述:由于微信游览器存在回弹机制,在html body下拉滚动的时候会把整个页面下拉出现由XXX提供字眼 问题复现: showImg(https://...

    rollback 评论0 收藏0
  • flex禁止ios微信览器回弹机制

    摘要:问题描述由于微信游览器存在回弹机制,在下拉滚动的时候会把整个页面下拉出现由提供字眼问题复现解决思路把整个或者用固定在浏览器的可视区域范围内,内容区域滚动的话需要使用滚动插件,在这里我用的是的滚动组件,如果使用是不会滚动的代码样式结构 问题描述:由于微信游览器存在回弹机制,在html body下拉滚动的时候会把整个页面下拉出现由XXX提供字眼 问题复现: showImg(https://...

    stormjun 评论0 收藏0
  • 深入探究iOS下fixed定位导致的问题

    摘要:讨论背景众所周知,元素在下的表现是糟糕的,元素在滚动页面中使用会出现各种奇怪的问题,在微信浏览器中使用就更甚如页面滚动,元素与页面相互分离页面滚动,元素消失等。说明原生渐变颜色终止会覆盖微信重设颜色的机制。 讨论背景 众所周知,fixed元素在IOS下的表现是糟糕的,fixed元素在滚动页面中使用会出现各种奇怪的问题,在微信浏览器中使用就更甚(如:页面滚动,fixed元素与页面相互分离...

    tulayang 评论0 收藏0
  • 深入探究iOS下fixed定位导致的问题

    摘要:讨论背景众所周知,元素在下的表现是糟糕的,元素在滚动页面中使用会出现各种奇怪的问题,在微信浏览器中使用就更甚如页面滚动,元素与页面相互分离页面滚动,元素消失等。说明原生渐变颜色终止会覆盖微信重设颜色的机制。 讨论背景 众所周知,fixed元素在IOS下的表现是糟糕的,fixed元素在滚动页面中使用会出现各种奇怪的问题,在微信浏览器中使用就更甚(如:页面滚动,fixed元素与页面相互分离...

    toddmark 评论0 收藏0

发表评论

0条评论

mzlogin

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<