关于禁止页面滚动的实践(禁止滚轮事件)

Posted 2020-08-17 小前PJ

禁止网页页面滚动只需要给document添加onmousewheel事件，然后在事件绑定函数当中设置e.preventDefault()就可以了，没错，就是芥末简单。

可是问题又来了，首先，onmousewheel是什么事件呢？它又有什么兼容性上的问题呢？

带着以上的两个问题，我通过查阅资料并且通过实践，得到了一下的认识。

1.onmousewheel是页面滚动事件，与onscroll不同的是，一般我们是通过onscroll来获取页面的滚动高度，然后添加相应的高度。

而onmousewheel，根据我个人的理解，是用来判断用户是往上滚动还是往下滚动。那它是根据什么来判断的呢？这个由于存在兼容性

问题，因此在讲兼容性的点上来详细讲。

2.如果是现代浏览器（IE9+，谷歌，火狐）的话，事件名为‘wheel‘，不过不同的浏览器判断的关键词不一样。

　　IE9+：e.deltaY，e.delta=62则代表向上滚动，e.deltaY=-62则代表向下滚动。

　　火狐：e.deltaY，不过火狐跟其他浏览器不一样（非主流）的就是，火狐向上滚动数值为负，向上滚数值为正，

　　　　　当e.deltaY=-3时代表向上滚动，e.deltaY=3时向下滚动。

　　谷歌：谷歌则是一如既往的都是根据e.wheelDelta来判断，e.wheelDelta=120（每滚一格滚去3行，每行40像素，加起来就是120）表示向上，

　　　　　e.wheelDelta=-120表示向下。

　　好了，那么接下来就是以往的浏览器了。

　　以往的浏览器除了火狐之外，都是（IE8-也是）绑定‘onmousewheel‘事件的，而且都是通过e.wheelDelta来判断的，120向上，-120向下。

　　而火狐则是绑定“onDOMMouseScroll”,根据e.detail来判断，-3向上，3向下。

　　　　接下来就要讲讲我第一次使用这个知识点得应用场景了。

　　　　在一次制作弹窗的时候发现，弹出中的文字显示在一个有滚动条的区域当中，问题就是当滚动条滚动到底部的时候，页面的滚动条就会滚动，向上同理。

　　　　因此，就要用到以上的知识点来禁止页面的滚动条滚动了。当给document绑定了“wheel”事件并且设置e.preventDefault后，滚轮不能使页面滚动了，可是，

　　　　弹窗里的滚动条也不滚动了，解决方法就是，给弹窗里的滚动条另外再绑定一个"wheel"事件，给两个判断条件，

　　　　1.当obj.scrollTop===0 && e.wheelDelta>0（谷歌写法）时，设置e.preventDefault();

　　　　2.当obj.clientHeight+obj.scrollTop >=obj.scrollHeight && e.wheelDelta<0时，设置e.preventDefault();

　　　　还要兼顾其他浏览器的写法，到此，这个问题就完美地解决了。

　　　　参考文章：1.http://www.jb51.net/article/69975.htm

　　　　　　　　　2.https://www.zhihu.com/question/21865401