移动端-webkit-overflow-scrolling:touch属性导致页面卡住

时间: 2020-09-01阅读: 242标签: 属性
故事的起因是,在一个多列表的页面上,页面在iOS11,跟iOS10中会发生页面卡住,不能进行滚动。然后就怀疑是自己的样式写的出了问题,就一直排查定位元素的样式,怎么都找不到问题所在。但还是本着追根溯源的精神,定位到根元素的样式上有一个-webkit-overflow-scrolling: touch;的样式属性;然后查了一下该属性:


-webkit-overflow-scrolling

属性控制元素在移动设备上是否使用滚动回弹效果.  
auto: 使用普通滚动, 当手指从触摸屏上移开,滚动会立即停止。
touch: 使用具有回弹效果的滚动,当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

在移动端上,在你用overflow-y:scorll属性的时候,你会发现滚动的效果很很生硬,很慢,这时候可以使用-webkit-overflow-scrolling:touch这个属性,让滚动条产生滚动回弹的效果,就像ios原生的滚动条一样流畅。 

 

问题

但是的但是,-webkit-overflow-scrolling:touch这个属性真的是超级神坑,比如:
  • 在safari上,使用了-webkit-overflow-scrolling:touch之后,页面偶尔会卡住不动。(中招)
  • 在safari上,点击其他区域,再在滚动区域滑动,滚动条无法滚动的bug。
  • 通过动态添加内容撑开容器,结果根本不能滑动的bug。(中招)
  • 滚动中 scrollTop 属性不会变化
  • 手势可穿过其他元素触发元素滚动
  • 滚动时暂停其他 transition


解决方案:

方案一

<div id="app" style="-webkit-overflow-scrolling: touch;">
<div style="min-height:101%"></div>
</div>


方案二

<div id="app" style="-webkit-overflow-scrolling: touch;">
<div style="height:calc(100%+1px)"></div>
</div>

方法就是在webkit-overflow-scrolling:touch属性的下一层子元素上,将height加1%或1px。从而主动触发scrollbar。  


思考为什么会出现这个问题

Safari对于overflow-scrolling用了原生控件来实现。对于有-webkit-overflow-scrolling的网页,会创建一个UIScrollView,提供子layer给渲染模块使用。我们也就只能解决到这了。  

站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9613

关闭

Vue.js-计算属性和class与style绑定

所有的计算属性都以函数的形式写在Vue实例中的computed选项内,最终返回计算后的结果。在一个计算属性中可以完成各种复杂的逻辑,包括运算、函数调用等,只要最终返回一个结果即可。

CSS通过text-transform实现大写、小写和首字母大写转换

再日常项目中可能会用到一些特殊的样式,比如大写字母转小写、小写字母转大写、首字母大写等。可以通过 CSS 的 text-transform 属性来实现:

css z-index属性

z-index 仅适用于定位元素。即 postition 值为 relative, absolute 和 fixed 属性;堆叠顺序是当前元素位于 z 轴上的值。值越大表示元素越靠近屏幕,反之元素越远离屏幕在同一个堆叠上下文中, z-index 值越大,越靠近屏幕。

Vue与ref属性与refs的使用

ref 被用来给DOM元素或子组件注册引用信息。引用信息会根据父组件的 $refs 对象进行注册。如果在普通的DOM元素上使用,引用信息就是元素; 如果用在子组件上,引用信息就是组件实例

H5中data-*容易忽略的问题

H5添加了data-*属性,非常方便。但经常忽略小写的问题, H5要求属性名全部小写,驼峰式命名的习惯掉坑了,alert出来的值出乎意料,通过data()方法获取所有data值后可以看到如下结果

常用的CSS属性

页面渲染时,dom元素所采用的 布局模型,可以通过 box-sizing 进行设置,根据计算高度的区域可分为:content-box (W3C 标准盒模型),border-box (IE盒模型)

获取relatedTarget属性

在做mouseenter与mouseleave的兼容时,我们需要用到事件对象的relatedTarget属性

Js枚举属性与for-in和for-of

首先要分清什么是可枚举属性,什么是不可枚举属性,在JavaScript中,对象的属性分为可枚举和不可枚举之分,它们是由属性的enumerable值决定的。可枚举性决定了这个属性能否被for…in查找遍历到。

js实现属性只读

第一种 Object.defineProperty这种是在vue源码中看见的;第二种使用闭包实现使用场景:团队协作开发的时候,没有详细的文档规范,防止队友误操作。

Vue中watch高阶用法

很多时候,我们监听一个属性,不会使用到改变前后的值,只是为了执行一些方法,这时可以使用字符串代替;总所周知,watch是在监听属性改变时才会触发,有些时候,我们希望在组件创建后watch能够立即执行一次。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!