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

-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')