遮罩层遮住滚动条，禁止滚动条滚动

很多同学在遇到这个问题的时候，会认为这是一个js问题。的确，js可以解决这个问题，但其实有比js更好的一个解决方案，而这个方案就是今天要分享的东西，通过简单的HTML布局就解决此问题。具体实现步骤如下：

一、不要把滚动条加到根节点上，而是自己写一个块。

二、块有了，给这个块设置与屏幕宽高相等的宽度和高度。

三、给这个块设置overflow-y:scroll让滚动条出现。

四、添加遮罩层，遮罩层与添加的块同级，宽高与屏幕宽高也相等。

这些操作都做完以后，你就会发现，鼠标在遮罩层上边滚动滑轮，滚动条也不动了，只有遮罩层消失，在滚动，才可以继续正常得滚动条。其中原理，就是因为滚动条加给了块，而滚动区域，也就被约定到了整个块范围内，新增的遮罩层，与块同级，并不在块范围之内，也就是可拖拽范围内，这个时候你无论如何滚动，也无法滚动滚动条了。

 

转载于:https://www.cnblogs.com/wangyinqian/p/7840112.html