习惯性的记录日常工作中因踩坑页面的蒙层而遇到的坑。这不仅仅是为了分享经验。真心希望路过的大神们留言赐教！场景描述如下：遮罩层下一层滚动可加载列表，遮罩层上方一层滚动可加载列表。目的是在显示遮罩层时不触发下层的滚动。有几种解决方法：禁用下层触摸事件，禁用下层滚动事件，截断底部溢出屏幕元素曲线，禁用下层滚动事件，禁用触摸事件。您可以分别禁用touchstart、touchmove和touchend。你可以巧妙地为元素设置touch-action:none属性。但是滚动滑块仍然存在：用户不能触摸触发滚动但是可以拖动滑块触发滚动……所以下层元素被裁剪到和屏幕一样的高度，没有溢出自然不会触发滚动。裁剪方案如下：蒙层渲染时，设置底层元素高度为屏幕可用高度，并添加overflow:hidden属性；当遮罩消失时恢复元素的默认设置。遮罩渲染时，给底层元素添加固定定位属性；当遮罩消失时，恢复元素的默认设置。{位置：固定；顶部：0；左：0；宽度：100%；高度：100%；overflow:hidden;}方案二明显好于方案一，因为没有用到js，一般人分不清availHeight和clientHeight,offsetHeight,scrollHeight...但是下层的scrollTop在mask层的时候并没有恢复disappenses...假设下层List包含100条数据，当用户滚动到第60到70条时，开启遮罩层，下层元素被截断静默恢复scrollTop=0。当关闭掩码时，将呈现给用户的是从0到10的数据，而不是从60到70的数据。如果用户想继续浏览从70到100的数据，他需要疯狂地向上滚动页面。因此，在打开遮罩层之前记录下此时的scrollTop值，关闭遮罩层时恢复下层的scrollTop。但是，获取和设置scrollTop还是有坑的。有两种方式：document.documentElement.scrollTopvarscrollTop=document.documentElement.scrollTopdocument.documentElement.scrollTop=scrollTopdocument.body.scrollTopvarscrollTop=document.body.scrollTopdocument.body=scrollscrollTop有的浏览器支持document.documentElement.scrollTop有的支持文档.body.scrollTop。幸运的是，其中一个有值，另一个必须为0。棘手的解决方案：varscrollTop=document.documentElement.scrollTop+document.body.scrollTopdocument。documentElement.scrollTop=scrollTopdocument.body.scrollTop=scrollTop不幸的是，即使clipping元素可以在mask被触摸时阻止下层滚动，scroll事件还是会穿透到下层，导致上层滚动。IOS如此，Android通过了考验（Android终于赢了比赛）。以上方案有瑕疵，还望路过的大神们留言赐教！作者：连小淼我的后花园：https://sunmengyuan.github.io...我的github：https://github.com/sunmengyuan
