介绍h5页面有弹出浮层时，如果在浮层下发生滚动，滑动浮层会导致滚动。这是一个样例页面，移动端访问如下：OriginMyGitHub在资料中发现有两个原因：-webkit-overflow-scrolling:使用了touch，而且这个不是标准属性。浮层也是页面的一个元素。浮层显示正常，页面其他元素按原样显示和操作。也就是说，这是一个正常的现象，只是我们不想要这样的效果。对于第一种说法，测试验证，这是一个样例页面，移动端访问如下：发现：与-webkit-overflow-scrolling:touch无关。处理方法网上查到的资料主要有两种思路：防止触摸相关事件。当浮层弹出时，禁止元素滚动，当浮层消失时，恢复滚动。第一种思路有很多资料提到的明显缺陷：弹出层的滚动会有问题。将锁定滚动区域。弹出层的事件处理可能会产生影响。第二种思路经常被使用，但是也有相应的问题：元素滚动状态切换时滚动位置会丢失。对于滚动位置丢失的问题，可以通过动态记录滚动位置来解决。示例代码//使用下面方法的前提是滚动元素生成为bodyfunctionfixedEle(){varscrollEle=document.body;//浮层可能会有切换，已经设置过的不需要重复设置。if(scrollEle.style.position!=='固定'){varscrollTop=document.body.scrollTop||文档.documentElement.scrollTop;scrollEle.style.cssText+='position:fixed;top:-'+scrollTop+'px;';}}functionrecoverEle(){varscrollEle=document.body;vartop=scrollEle.style.top;scrollEle.style.position='';scrollEle.style.top='';document.body.scrollTop=document.documentElement.scrollTop=-parseInt(top);}这是一个示例页面，移动端访问如下：参考资料overflow-scrollingMDNiOS-css/js-OverlayscrollbutpreventbodyscrollPreventbodyscrollingonmobiledevicePreventPageScrollingWhenaModalisOpenscrollingpenetrationproblemonmobilegithubbody-scroll-lockiOS10Safari:Preventscrollingbehindafixedoverlay并保持滚动位置
