safari下页面无法滑动问题

时间:2024-03-27 14:14:49

  最近项目中遇到了个很蛋疼的问题,困扰了很久,甚至最后采取了模拟scroll的办法。

首先是个基于vue项目,很多一些地方需要滑动,就直接用了overflow:auto或者scroll,比如这样safari下页面无法滑动问题safari下页面无法滑动问题

本来吧,应该都是没什么问题的。我的手机是安卓的,所以开发时也都没问题,chrome上模拟的也没问题。 但公司测试的时候问题来了,居!然!划!不!动!了!

阻止浏览器默认事件,取消定位,消除浮动。能想到的都搞了一遍。 然并卵!!

这个时候想到会不会是兼容问题,最后发现是因为mescroll默认给了body样式 “-webkit-overflow-scrolling:touch

safari下页面无法滑动问题

直接说重点:  加了此属性,特定情况会导致safari下出现页面卡死问题,即不能滑动。本身这属性是为了解决Safari下滑动不顺畅的痛点,但也带来了很多坑。

BUG原因: 用了这属性的标签,不要加!定!位!。 举个栗子,body下加了这个,那么你网页中所有想用溢出滚动的地方都不可以加定位,否则就可能出现卡死情况,哪怕是你body下再加了一个盒子也不行。

解决方案:使用第三方库,如mescroll,iscroll等。 或者嫌项目臃肿或者用不到很多,就直接自己模拟。 其实最简单的就是尽量避免定位布局