您的位置:新葡亰496net > 新葡亰官网 > jQuery插件编写,鼠标滚轮事件_javascript技术_脚本

jQuery插件编写,鼠标滚轮事件_javascript技术_脚本

发布时间:2019-12-12 08:01编辑:新葡亰官网浏览(160)

    子元素scroll父元素容器不跟随滚动JS实现

    2015/12/18 · JavaScript · 滚动

    原文出处: 张鑫旭   

    一、开场暖身

    网上常见蹲来蹲去的小段子,比方说:“李代沫蹲,李代沫蹲,李代沫蹲完黄海波蹲;黄海波蹲,黄海波蹲,黄海波蹲完宁财神蹲;宁财神蹲,宁财神蹲,宁财神蹲完张耀扬蹲;张耀扬蹲,张耀扬蹲,张耀扬蹲完郭美美蹲;郭美美蹲,郭美美蹲,郭美美蹲完……”。应该源自“萝卜蹲,萝卜蹲,萝卜蹲完苹果蹲……”。

    在网页中,滚动条的滚动行为也是类似的调调,如果页面出现多个内嵌滚动条,则行为表现是:子元素滚,子元素滚,子元素滚完父元素滚;父元素滚,父元素滚,父元素滚完容器滚……

    比方说下面:

    新葡亰496net 1

    在妹子脸上滚,先是妹子滚,妹子滚完主页面滚,对吧~

    //zxx: 别问为什么不使用张含韵,因为张妹子照片是横的,滚动空间小,晓得伐~

    这是浏览器的默认行为,如果我们遇到了一个需求:子元素滚,子元素滚完,就完了,父元素不需要滚了。那该如何实现呢?

    在PC端,OK,本文介绍的方法,值适用于PC端,移动端,咳咳,我15年就没做过移动端项目,不好意思,手生,我也没去研究。

    首先来学习两个函数

    webtouch(webapp)页面,防苹果手机safari浏览器,网上滑动,底部导航消失,滑动到底部又出现。向下滑动,底部导航出现。

    今天在网上找来了响应滚轮的函数并改写成下面的类复制代码 代码如下:function wheelEvent { this.handle = handle; // different events between Firefox and IE window.addEventListener ? obj.addEventListener("DOMMouseScroll", this.wheel, false) : (obj.onmousewheel = this.wheel); } wheelEvent.prototype.wheel = function { var ev = event || window.event; var delta = ev.wheelDelta ? : ; // Firefox using `wheelDelta` IE using `detail`新葡亰496net, eval ('delta ? ' parent.handle '; } 在使用的时候需要定义一个执行函数,用以根据从上述类中获得的值进行操作,并为指定的网页元素添加事件。比如复制代码 代码如下:function handle { document.getElementById.scrollTop -= delta * 20; } new wheelEvent(document.getElementById; 在上例中第一个参数是添加滚轮事件的网页元素, id 为 text 的 div;第二个参数是执行函数的名字 handle。 其中 handle 函数必须有且只有一个参数delta,滚轮往上滚时 delta 大于 0,往下则小于 0。上例 handle 函数的作用是用滚轮对 div 实现滚动条的功能

    二、阻止浏览器默认行为的特定套路

    哈,本文标题有些拗口,实际上用一句话概括就是:如何阻止浏览器的默认滚动行为。

    基本上,好像印象中就没有例外的,阻止浏览器的默认行为,就一条(假设事件对象参数是event):event.preventDefault().

    这是标准规范使用方法。但是,对于老IE浏览器,event.returnValue = false. 如果你使用jQuery等框架,直接上面的event.preventDefault()就可以,库已经帮你搞定了兼容细节处理。

    OK,回到本文。阻止默认滚动,也是类似,关键是找到准确的事件。

    第一反应是scroll事件,不知道是不是我测试的方法不对,结果没鸟用;其实想想也可以理解,scroll事件要触发,尼玛必须已经滚动了哈~

    后来,发现要从滚动事件的源头处理起来。在PC端,绝大多数滚动都是鼠标滚动触发的(上下快捷键也可以滚动页面,但一般人不知道),因此,我们可以从鼠标滚轮事件入手。

    1. $.extend(desc,src1,src2,src3.....)
      这是最简单就是后面的对象及属性覆盖合并到desc中并返回
    2. $.fn.extend(src)
      这是扩展jQuery实例对象的方法,后续介绍
    3. $.extend()
      这是扩展jQuery全局方法,后续介绍
    4. $.extend(boolean,dest,src1,src2,src3....)
      这个和第一个类似,boolean为true时,深拷贝的意思就是属性为对象的话,里面属性会覆盖合并,
      而boolean为false时,属性为对象的话,后面的该属性只是会覆盖,而不会考虑内层的属性
      详细链接:http://www.cnblogs.com/RascallySnake/archive/2010/05/07/1729563.html

     

    三、鼠标滚轮事件

    JS基础知识的啦,mousewheel事件:

    dom.onmousewheel = function() { // 嘿嘿嘿 };

    1
    2
    3
    dom.onmousewheel = function() {
        // 嘿嘿嘿
    };

    IE, Chrome都认识,但是FireFox浏览器,要使用DOMMouseScroll, 具体知识呢我之前有写过文章分析过:“JS滚轮事件(mousewheel/DOMMouseScroll)了解”。现在回过头看看这篇文章,内容和点都挺好。但是,当时正好在学习模块化开发,以及JavaScript语言模式,所以,提供的代码,科科,不是拿来主义的调调,所以这篇文章没有火啊~

    扯远了,总之呢,我们对鼠标滚动这个事件,进行event.preventDefault(),页面就像齿轮卡壳了一样,滚不动了!

    正式开始

    1、$.fn.extend jQuery对象函数
    写一个拖拽

      $(function () {
            $.fn.extend({
                drag:function() {
                    //this jQuery对象
                    var disX = 0;
                    var disY = 0;
                    var self = this;
                    this.mousedown(function (e) {
                        disX = e.pageX - $(this).offset().left;
                        disY = e.pageY - $(this).offset().top;
                        $(document).mousemove(function (e) {
                            self.css('left', e.pageX - disX);
                            self.css('top', e.pageY - disY);
                        });
                        $(document).mouseup(function () {
                            $(document).off('mousemove');
                        });
                        return false;
                    });
                }
            })
        })
    //$("div").drag 调用
    

    2、$.extend jQuery工具函数

    $.extend({    
        leftTrim: function (str) {   
           return str.replace(/^s /g, '');    
        }
    })
    //$.leftTrim(str) 调用
    

    3、基本结构

    (function($){
      $.fn.scrollUnique=function(){
        return this.each(fucntion(){
             //相关处理
          })
      }
    }(jQuery)```
      写一个关于禁止外侧滚动的插件
    

    (function ($) {
    $.fn.scrollUnique = function () {
    var eventType = 'mousewheel';
    if (document.mozHidden !== undefined) {
    eventType = 'DOMMouseScroll';
    }
    return this.each(function () {
    $(this).on(eventType, function (event) {
    var scrollTop = this.scrollTop;
    var scrollHeight = this.scrollHeight;
    var height = this.clientHeight;
    var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);
    if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) { // IE浏览器下滚动会跨越边界直接影响父级滚动,因此,临界时候手动边界滚动定位
    this.scrollTop = delta > 0 ? 0 : scrollHeight; // 向上滚 || 向下滚
    event.preventDefault();
    }
    });
    });
    }}(jQuery))

    遇到问题

    1、我一开始用swipeup和swipedown来做,发现因为有滚动条,不会触发。因此只能判断滚动条是上滚下滚等。关于手机手势,后面的文章会介绍,欢迎关注!

    2、通过上滚下滚来让底部导航显示或者因此,安卓上面的浏览器都可以,但是苹果safari会一闪一闪,原因是苹果safari自动有个弹跳效果,导致事件重复执行,解决办法是给上滚下滚一个距离,滚动到一定距离后返回是上滚还是下滚。

    四、原理爬上来

    找到了关键钥匙,现在就要开门了。

    子元素可以滚,父元素不能滚。

    我们可以对子元素写上鼠标滚轮事件,对吧,的那个子元素滚动到边界的时候,我们立马插一刀event.preventDefault()。干掉整个页面的滚动,世界一下子安静了,时间好像突然静止了一般,好像很不错的样子哦!

    于是,寡人我屁颠屁颠搞起代码(粗糙示意):

    if (direction == 'up' && scrollTop == 0) { event.preventDefault() }

    1
    2
    3
    if (direction == 'up' && scrollTop == 0) {
       event.preventDefault()
    }

    翻译下就是:哥哥我往上滚,当滚到头的时候,页面滚动歇菜。

    Chrome一测试,喔噢,好棒,鼓掌! 新葡亰496net 2 FireFox一测试,喔噢,好棒too,鼓掌again! 新葡亰496net 3 IE一测试,喔噢,好…………尼玛,滚蛋了~ 滚动高度直接跳过了0,直接把父元素给滚了。 新葡亰496net 4

    靠,什么鬼?不兼容,搞不定,怎么办?

     

    五、临界手动翻滚

    就是说,我们不要到0或者最大滚动高度时候,再去阻止默认滚动,我们要在到达边界的前一个滚动,就开始下手,手动滚动到边界,同时event.preventDefault()阻止鼠标滚动行为。于是,IE浏览器也棒棒哒了!新葡亰496net 5

    说实话,从开头到现在,中文啪啪啪敲了这么多,其实毛线用都没有,从度娘或谷哥过来的同学需要的不是什么神神叨叨的废话,需要的只是下面这段可以直接拿来主义的代码,好吧,拿去吧——子元素滚完就滚完的方法源代码:

    $.fn.scrollUnique = function() { return $(this).each(function() { var eventType = 'mousewheel'; // 火狐是DOMMouseScroll事件 if (document.mozHidden !== undefined) { eventType = 'DOMMouseScroll'; } $(this).on(eventType, function(event) { // 一些数据 var scrollTop = this.scrollTop, scrollHeight = this.scrollHeight, height = this.clientHeight; var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0); if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) { // IE浏览器下滚动会跨越边界直接影响父级滚动,因此,临界时候手动边界滚动定位 this.scrollTop = delta > 0? 0: scrollHeight; // 向上滚 || 向下滚 event.preventDefault(); } }); }); };

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    $.fn.scrollUnique = function() {
        return $(this).each(function() {
            var eventType = 'mousewheel';
            // 火狐是DOMMouseScroll事件
            if (document.mozHidden !== undefined) {
                eventType = 'DOMMouseScroll';
            }
            $(this).on(eventType, function(event) {
                // 一些数据
                var scrollTop = this.scrollTop,
                    scrollHeight = this.scrollHeight,
                    height = this.clientHeight;
     
                var delta = (event.originalEvent.wheelDelta) ? event.originalEvent.wheelDelta : -(event.originalEvent.detail || 0);        
     
                if ((delta > 0 && scrollTop <= delta) || (delta < 0 && scrollHeight - height - scrollTop <= -1 * delta)) {
                    // IE浏览器下滚动会跨越边界直接影响父级滚动,因此,临界时候手动边界滚动定位
                    this.scrollTop = delta > 0? 0: scrollHeight;
                    // 向上滚 || 向下滚
                    event.preventDefault();
                }        
            });
        });
    };

    没错,依赖jQuery的一个扩展方法,上面代码只要拷贝到你页面的JS中,然后,你希望哪个元素滚动到底,父级不滚动,直接:

    $().scrollUnique();

    1
    $().scrollUnique();

    就可以了,然后就可以打卡下班了。

    对了,有个demo, 您可以狠狠地点击这里:里面元素滚动到底外部容器不滚动demo

    如果您的显示器竖屏,或者宽度1920的,会发现右侧没有大滚动条,则,麻烦大家手动高度改小,拉拉窗口啊,或者打开控制台之类的。

    //zxx: 你问我什么不加高页面造一个滚动条?唉,舍不得把底部的广告刻意藏在滚动条之外~

    单纯判断滚动条方向

     

    Js代码  新葡亰496net 6

    1. function scroll( fn ) {  
    2.     var beforeScrollTop = document.body.scrollTop,  
    3.         fn = fn || function() {};  
    4.     window.addEventListener("scroll", function() {  
    5.         var afterScrollTop = document.body.scrollTop,  
    6.             delta = afterScrollTop - beforeScrollTop;  
    7.         if( delta === 0 ) return false;  
    8.         fn( delta > 0 ? "down" : "up" );  
    9.         beforeScrollTop = afterScrollTop;  
    10.     }, false);  
    11. }  

     

     

    调用方法:

    Js代码  新葡亰496net 7

    1. scroll(function(direction) { console.log(direction) });  

     

     

    六、抛砖引玉

    前文也提到,页面滚动条滚动的事件源很多,不仅仅是鼠标滚动,上下键,End键, Home键等都有滚动定位行为。因此,大家要想100%全方位封杀滚动行为,仅仅上面的鼠标滚动代码是不够的,但是,关键钥匙已经给大家了,大家可以依次,按照自己的项目需求进行进一步深入拓展。

    不过,我个人觉得,上面mousewheel处理已经足够了,什么键盘触发滚动,让他自己去玩耍吧,还是别折腾了,吃力不讨好。

    哟,写完了,抬头一看,一张截图都没有,这可不行,风水不能断,搞一张。

    新葡亰496net 8

    恩,不错,真正的无可挑剔的「截」图。

    新葡亰496net 9

     

    1 赞 1 收藏 评论

    新葡亰496net 10

    以上方法手机苹果浏览器事件会跳动,解决方法及代码改进

    Js代码  新葡亰496net 11

    1. scrollDirect: function (fn) {  
    2.     var beforeScrollTop = document.body.scrollTop;  
    3.     fn = fn || function () {  
    4.     };  
    5.     window.addEventListener("scroll", function (event) {  
    6.         event = event || window.event;  
    7.   
    8.         var afterScrollTop = document.body.scrollTop;  
    9.         delta = afterScrollTop - beforeScrollTop;  
    10.         beforeScrollTop = afterScrollTop;  
    11.   
    12.         var scrollTop = $(this).scrollTop();  
    13.         var scrollHeight = $(document).height();  
    14.         var windowHeight = $(this).height();  
    15.         if (scrollTop   windowHeight > scrollHeight - 10) {  //滚动到底部执行事件  
    16.             fn('up');  
    17.             return;  
    18.         }  
    19.         if (afterScrollTop < 10 || afterScrollTop > $(document.body).height - 10) {  
    20.             fn('up');  
    21.         } else {  
    22.             if (Math.abs(delta) < 10) {  
    23.                 return false;  
    24.             }  
    25.             fn(delta > 0 ? "down" : "up");  
    26.         }  
    27.     }, false);  
    28. }  

     

    调用方法:

    Js代码  新葡亰496net 12

    1.   var upflag=1;  
    2.   var  downflag= 1;  
    3.    //scroll滑动,上滑和下滑只执行一次!  
    4. jQuery插件编写,鼠标滚轮事件_javascript技术_脚本之家。crollDirect(function (direction) {  
    5.        if (direction == "down") {  
    6.            if (downflag) {  
    7.                $(".footer_wrap").slideUp(200);  
    8.                downflag = 0;  
    9.               upflag = 1;  
    10.            }  
    11.        }  
    12.        if (direction == "up") {  
    13.            if (upflag) {  
    14.                $(".footer_wrap").slideDown(200);  
    15.               downflag = 1;  
    16.                upflag = 0;  
    17.            }  
    18.        }  
    19. });  

     

    滚动条滚动到底部和头部判断

    其实我上面的函数中已经有判断,下面再列一下!看如下函数!

    Js代码  新葡亰496net 13

    1. BottomJumpPage: function () {  
    2.             var scrollTop = $(this).scrollTop();  
    3.             var scrollHeight = $(document).height();  
    4.             var windowHeight = $(this).height();  
    5.             if (scrollTop   windowHeight == scrollHeight) {  //滚动到底部执行事件  
    6.                     console.dir("我到底部了");  
    7.   
    8.             }  
    9.             if (scrollTop == 0) {  //滚动到头部部执行事件  
    10.             console.dir("我到头部了");  
    11.   
    12.             }  
    13.  }  

     

    调用方法:

    Js代码  新葡亰496net 14

    1. $(window).scroll(BottomJumpPage);   

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:jQuery插件编写,鼠标滚轮事件_javascript技术_脚本

    关键词:

上一篇:新葡亰496netReactJs入门教程,实战教程

下一篇:没有了