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

禁止网页页面滚动只需要给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

原文地址:https://www.cnblogs.com/hackerPJ/p/6035430.html