-webkit-overflow-scrolling:touch; ios橡皮筋效果卡屏，滚动穿透 --已解决

最新推荐文章于 2020-05-25 14:49:18 发布

moguPeople

最新推荐文章于 2020-05-25 14:49:18 发布

阅读量2.5k

点赞数 1

分类专栏：实用方法 -webkit-overflow-scrolling:touch 滚动穿透文章标签： -webkit-overflow-scrolling:touch ios 滚动卡屏滚动穿透

本文链接：https://blog.csdn.net/fly_wugui/article/details/90703078

版权

本文探讨了`-webkit-overflow-scrolling:touch`在iOS设备上可能导致的滚动卡屏和滚动穿透问题。当使用`touch`值时，页面有时会卡住。分析表明，在滚动条到达顶部或底部时出现此问题。解决方案是监听滚动位置，防止滚动条到达边界。此外，针对滚动穿透问题，提出在弹窗显示时固定底部滚动内容并设置`position: fixed`来避免事件穿透。

摘要由CSDN通过智能技术生成

-webkit-overflow-scrolling 属性

MDN中概述入下

-webkit-overflow-scrolling 属性控制元素在移动设备上是否使用滚动回弹效果.

值选项

1、auto
使用普通滚动, 当手指从触摸屏上移开，滚动会立即停止
2、touch
使用具有回弹效果的滚动, 当手指从触摸屏上移开，内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。

问题 BUG

1、使用了-webkit-overflow-scrolling:touch之后，页面偶尔会卡住不动。

复现场景：发现页面在滚动期间是不会出现卡住的问题，但是在滚动条到顶部或者底部的时候会出现这个问题
分析问题：如果在到达顶部/底部的时候不让它到达顶部/底部,是不是可以规避这个问题
解决办法: 在滑动的时候为滑动区域添加 scroll事件监听滚动条是否到了底部/顶部如果到了顶部/底部那么让scrollTop¹相应的减少 1；
代码如下：

// js 文件

// 获取滚动区域
let el = document.getElementById('scrollSectionArea') 
// 获取滚动内容的高度 如果是在是vue 使用动态的获取高度请将获取元素替换为 ref 来获取,不然是获取不到高度的 在监听函数内部注意this指向
let scrollHeight =  document.getElementById('scrollSection')