Open XXHolic opened 4 years ago
h5 页面有弹窗浮层时，浮层之下若产生了滚动，滑动浮层时会让其产生滚动。这是示例页面，移动端访问如下：
找到的信息里面有两种说法：
-webkit-overflow-scrolling: touch
针对第一种说法，进行测试验证，这是示例页面，移动端访问如下：
发现：跟 -webkit-overflow-scrolling: touch 无关。
在网上找到的资料，主要有两种思路：
第一种思路在很多资料中提到有明显的缺陷：
较多采用第二种思路，但也有对应的问题：
针对滚动位置丢失问题，采用动态记录滚动位置的方式可以解决。
这是示例页面，移动端访问如下：
引子
h5 页面有弹窗浮层时，浮层之下若产生了滚动，滑动浮层时会让其产生滚动。这是示例页面，移动端访问如下：
原因
找到的信息里面有两种说法：
-webkit-overflow-scrolling: touch，另外这个不是标准属性。针对第一种说法，进行测试验证，这是示例页面，移动端访问如下：
发现：跟
-webkit-overflow-scrolling: touch无关。处理方法
在网上找到的资料，主要有两种思路：
第一种思路在很多资料中提到有明显的缺陷：
较多采用第二种思路，但也有对应的问题：
针对滚动位置丢失问题，采用动态记录滚动位置的方式可以解决。
示例代码
```js // 以下方法使用的前提是产生滚动元素为 body function fixedEle() { var scrollEle = document.body; // 有可能出现浮层内切换的情况，已经设置了就不用重复设置了。 if (scrollEle.style.position !== 'fixed') { var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; scrollEle.style.cssText += 'position:fixed;top:-'+scrollTop+'px;'; } } function recoverEle() { var scrollEle = document.body; var top = scrollEle.style.top; scrollEle.style.position = ''; scrollEle.style.top = ''; document.body.scrollTop = document.documentElement.scrollTop = -parseInt(top); } ```这是示例页面，移动端访问如下：
参考资料
:wastebasket:
最近看了海贼王的剧场版《狂热行动》，一开头就看到了广电的标志，然后看里面的字幕，发现真是搞笑，“海贼”变成了“航海家”，“革命军”变成了“正义联盟”，看着拿着刀到处砍人的“航海家”，真是滑稽。这个撇开不说，里面聚集了路飞前期遇到的 BOSS ，看着打斗还是蛮爽的。这次的 BOSS 路飞一个人搞不定，聚集了海军、七武海、革命军的力量才解决了。 ![63-poster][url-local-poster]