技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> JavaScript --> JS如何实现响应滚轮(同时设置滚动条无效)

JS如何实现响应滚轮(同时设置滚动条无效)

浏览:7994次  出处信息
js 响应滚轮效果

翻滚吧,javascript

    我这个人记录东西有个习惯,就是想到的东西就尽量延伸。能想到的地方尽量都写出来。所以这篇文章还是围绕着js响应鼠标滚动来论述。在之前的一篇文章(JS(如何判断)鼠标滚轮事件解析)中,我已经说清楚了对于各个浏览器是如何来用js进行判断鼠标滚轮是向上滚动还是向下滚动。(主要是获取反馈回来的e.wheelDelta或者e.detail,不明白的看上文)

    今天这里就写了一个小例子来进行小小的实战的一下。当然这个小例子有个不同的地方,就是当鼠标移动到固定的box(div盒子)上并滚动滚轮的时候,浏览器默认的滚动条会失效(当然不是什么bug,是js使得默认的滚动条无效。),当鼠标移出这个box的时候,浏览器滚动条才继续工作。此代码兼容各大浏览器,如有bug欢迎反馈。

    当然看文字不如结合实例来看,下面给出实例代码供大家调戏...


0

鼠标移动这里,转动滚轮,尽情的调戏吧! 鼠标移出这里,转动滚轮,看看它的反应!

    运行代码复制代码另存代码(提示:可以编辑后运行)

    通过运行上述代码,你应该看到鼠标移动到哪个内容块上,滚动滚轮数字会加减(向上变小,向下变大),并且浏览器默认的滚动条不会滚动了。

如何使得浏览器默认滚动条失效?

    这里是为什么呢?为什么浏览器默认的滚动条失效了呢?你是怎么办到的?

    其实呢,实现这个代码很简单,看下面代码

    if (navigator.userAgent.toLowerCase().indexOf(\'msie\') >= 0) {

     event.returnValue = false;

     } else {

     e.preventDefault();

     };

    主要是针对ie的 event.returnValue = false; 与非ie浏览器 e.preventDefault() 在作用。

preventDefault是什么?如何使用

    这个函数是阻止浏览器执行与事件关联的默认动作

    关于preventDefault的具体用法说明以及案例,自己百度先。下面给两个链接可以参考下,一个是w3school的说明,另外一个jquery中封装的preventDefault的用法。

  • http://www.w3school.com.cn/htmldom/event_preventdefault.asp
  • http://api.jquery.com/event.preventDefault/
  •     大家可以看到上面的代码在firefox中是有效的,并且能够正确执行。如果你之前的一篇文章你就会想要提问,我的代码明明是执行的onmousewheel事件,而firefox是默认不支持这个事件的。我是怎么做到的呢?怎么做到的。。。看下面

    如何让firefox支持onmousewheel事件

        呵呵,上面的话很有废话的意思,不过废话多点就多点吧,给大家调调口味,总是重口味的技术不太好,不利于消化。

        你肯定看到了后面的针对firefox的事件监听,呵呵,我没有把读者当傻子,只是我想要水一下而已。不废话了,代码部分。

        if (navigator.userAgent.toLowerCase().indexOf(\'firefox\') >= 0) {

         //firefox支持onmousewheel

         addEventListener(\'DOMMouseScroll\',

         function(e) {

         var obj = e.target;

         var onmousewheel;

         while (obj) {

         onmousewheel = obj.getAttribute(\'onmousewheel\') || obj.onmousewheel;

         if (onmousewheel) break;

         if (obj.tagName == \'BODY\') break;

         obj = obj.parentNode;

         };

        if (onmousewheel) {

         if (e.preventDefault) e.preventDefault();

         e.returnValue = false; //禁止页面滚动

         if (typeof obj.onmousewheel != \'function\') {

         //将onmousewheel转换成function

         eval(\'window._tmpFun = function(event){\' + onmousewheel + \'}\');

         obj.onmousewheel = window._tmpFun;

         window._tmpFun = null;

         };

         // 不直接执行是因为若onmousewheel(e)运行时间较长的话,会导致锁定滚动失效,使用setTimeout可避免

         setTimeout(function() {

         obj.onmousewheel(e);

         },

         1);

         };

         },

         false);

         };

        牛魔王的世界观基情提示:可以将此代码加入到全局js文件里面,这样伟大的firefox就能支持不凡的onmousewheel事件了。

        接下来讲点神马呢,后面的文章可能会涉及,制作一个带自定义滚动条的box,然后用滚轮控制盒子的内容上下滚动,敬请关注。

    建议继续学习:

    1. js中鼠标滚轮事件详解    (阅读:2452)
    QQ技术交流群:445447336,欢迎加入!
    扫一扫订阅我的微信号:IT技术博客大学习
    © 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

    京ICP备15002552号-1