網頁局部滾動時屏蔽全局滾動事件(屏蔽鼠標滾輪事件)打賞

標題有些繞,其實就是很簡單的問題,很多人應該都遇到過,最近優化自動完成的插件,發現在下拉框內容多時出現滾動條的情況下,如果頁面本身也有滾動條,就很容易出現兩邊都滾動的情況,體驗非常之差。因為之前沒有考慮過此類問題,自信想了下,應該可以通過技術手段避免。

一開始想過監聽scroll事件,但是發現這樣的想法本身就有誤區,因為滾動某個元素本身,而要去屏蔽window的滾動,根本說不通,那么換一種思路,既然滾動通常是鼠標操作,何不操作處理滾輪事件?

簡單查了下,的確有類似的文章,我們都知道,jQuery插件默認是不支持鼠標中輪滾輪事件的,現在我們可以用于添加跨瀏覽器的鼠標滾輪支持可以使用jQuery的Mousewheel插件,具體插件大家可以搜jquery.mousewheel.js找到,這里不再額外貼地址。

另外要注意的就是,mousewheel事件的delta。通過參數delta可以獲取鼠標滾輪的方向和速度。如果delta的值是負的,那么滾輪就是向下滾動,正的就是向上,如此以來,我們只用給特定元素綁定鼠標滾動事件,鼠標滾動時始終阻止事件,同時可以根據delta參數調整當前元素的scrollTop,實現滾動效果,看起來很簡單,外加jQuery的Mousewheel插件,基本上大家應該知道怎么寫了,這里就不贅述了。

下面拋開jQuery插件,提供一份直接屏蔽Mousewheel事件的代碼,測試兼容常用瀏覽器(IE僅測到8.0版本)。

var preventScroll = function(dom){
        if(dom.jquery){
            dom = dom.get(0);
        }
        if(navigator.userAgent.indexOf('Firefox') >= 0){   //firefox
            dom.addEventListener('DOMMouseScroll',function(e){
                dom.scrollTop += e.detail > 0 ? 60 : -60;
                e.preventDefault();
            },false);
        }else{
            dom.onmousewheel = function(e){
                e = e || window.event;
                dom.scrollTop += e.wheelDelta > 0 ? -60 : 60;
                return false;
            };
        }
    };
網頁局部滾動時屏蔽全局滾動事件(屏蔽鼠標滾輪事件)
文章《網頁局部滾動時屏蔽全局滾動事件(屏蔽鼠標滾輪事件)》二維碼
  • 微信打賞
  • 支付寶打賞

已有2條評論

  1. 樸人博客

    多多交流

    2016-03-17 23:52 回復
  2. 爆實惠

    技術牛,頂一個[威武]

    2015-11-22 20:47 回復

(必填)

(必填)

(可選)

黑龙江22选5开奖