了解JS滾輪事件(mousewheel/DOMMouseScroll)
JS滾輪事件(mousewheel/DOMMouseScroll)了解
一、學無止境、溫故知新
//zxx: 本段與技術無關,一些很個人的吐槽,可以跳過
已經沒有了小學生時代過目不忘的記憶力了,很多自己折騰的東西、接觸的東西,短短1年之後就全然不記得了。比方說,完全記不得獲取元素與頁面距離的方法(getBoundingClientRect),或者是不記得現代瀏覽器下觸發DOM自訂事件的方法(dispatchEvent). 顯然,適當的溫習,翻閱以前的東西,或者自己空餘時間處理相關的東西還是有必要的。其實,細想,東西記不住是自己自身原因,在折騰的時候就沒有想方設法牢記(而不是透過反覆使用記住)。比方說getBoundingClientRect就是「得到客戶端矩形邊界」的意思,或是用邪惡記法來記住「割(g)逼(b)艹(c)軟(r)」。 dispatchEvent方法使用“3步驟”,“創建(createEvent)-初始(init*Event)-分派(dispatchEvent)”。
學習的腳步不能停止。一站到底的那些「變態」們也有不知道的東西,顯然,我們這些草輩,尤其年輕的自己,不知道的更多。誰年輕的時候沒有過或多或少 的迷茫,問自己“路在何方”,問自己“該做哪個方向”,無論你選擇的是什麼,學習的腳步是不能停止的。堅持堅持著,路自然就會清晰,你就會知道接下來該怎麼走了。只怕畏首畏尾,得過且過,年輕就是資本,義無反顧前行吧。
我憑著興趣走上現在的道路,完全是興趣學習(我喜歡這些,我要學),不是職業學習(做前端需要什麼,我就去學什麼)。工作的這些年,技術、產品的自 我沉浸不知不覺限制了自己的眼界,好在意識到問題的存在其實已經解決了問題的一半。這裡之所以會說這些是想提醒自己,萬萬不可矯枉過正,技術、產品的學習 還是主要的,只是要多多抬頭看看辦公室之外的世界(不是刷微博獲得的淺認識)。
昨天機緣巧合遇到“滾輪事件”,以前折騰“自定義滾動條”時候使用過滑鼠滾輪事件,不過這是基於MooTools已經兼容好的mousewheel事件實現的,如果要說出其中的實作機制,瀏覽器相容差異等,就傻眼了。學無止境,因此,查閱之,實踐之,整理之。
二、相容差異大全
滾輪事件的兼容性差異有些不拘一格,不是以往的IE8-派和其他派,而是FireFox派和其他派。
包括IE6在內的瀏覽器是使用onmousewheel,而FireFox瀏覽器一個人使用DOMMouseScroll. 經自己測試,即使現在FireFox 19下,也是不識onmousewheel。
一個最簡單的使用差異(body捲軸由內部一定高div撐開):
document.body.onmousewheel = function(event) {
event = event || window.event;
console.dir(event);
};
document.body.addEventListener("DOMMouseScroll", function(event ) {
console.dir(event);
});
以上輸出差異請見下方(IE7, IE10, Chrome, 以及FireFox,滑鼠向下捲動, win7)(可點選此頁面單獨查看表格內容):
三、相容的滾輪事件方法
知己知彼百戰百勝,知道了差異就知道如何處理這些差異。畢竟不是寫JS函式庫,我們這裡只處理滾動方向這塊的差異。
整合我們通常事件新增方法,於是有(下程式碼代號為addEvent.js):
/** * 简易的事件添加方法 */ define(function(require, exports, module) { exports.addEvent = (function(window, undefined) { var _eventCompat = function(event) { var type = event.type; if (type == 'DOMMouseScroll' || type == 'mousewheel') { event.delta = (event.wheelDelta) ? event.wheelDelta / 120 : -(event.detail || 0) / 3; } //alert(event.delta); if (event.srcElement && !event.target) { event.target = event.srcElement; } if (!event.preventDefault && event.returnValue !== undefined) { event.preventDefault = function() { event.returnValue = false; }; } /* ......其他一些兼容性处理 */ return event; }; if (window.addEventListener) { return function(el, type, fn, capture) { if (type === "mousewheel" && document.mozHidden !== undefined) { type = "DOMMouseScroll"; } el.addEventListener(type, function(event) { fn.call(this, _eventCompat(event)); }, capture || false); } } else if (window.attachEvent) { return function(el, type, fn, capture) { el.attachEvent("on" + type, function(event) { event = event || window.event; fn.call(el, _eventCompat(event)); }); } } return function() {}; })(window); });
於是,我們就可以很從容使用mousewheel事件了。例如:
addEvent(dom, "mousewheel", function(event) { if (event.delta < 0) { alert("鼠标向上滚了!"); } });
相關程式碼實作如下,下面這個展示的就是平滑移動的核心程式碼們(代號為slide.js):
/** * 简易的列表左右滑动切换效果 * 鼠标事件是关键,因此,一些数值写死在方法中,纯测试用 */ define(function(require, exports, module) { var Event = require("/study/201304/addEvent.js"); var _move = function(ele, to, from) { // 动画实现 // ... }; return { index: 0, visible: 4, init: function(box) { // box指滚动的列表容器 var self = this , length = box.getElementsByTagName("li").length; Event.addEvent(box.parentNode, "mousewheel", function(event) { if (event.delta > 0 && self.index > 0) { // 往上滚 self.index--; } else if (event.delta < 0 && self.index < length - self.visible) { // 往下 self.index++; } else { return; } _move(box, -1 * self.index * 140); event.preventDefault(); }); } }; });
原理很簡單,滾輪改變,索引改變,也就是清單的最終位置改變,動畫到目標位置即可。
然後,demo頁面使用seajs簡單呼叫就可以了!
var $ = function(id) { return document.getElementById(id); }; seajs.use("/study/201304/slide.js", function(slide) { slide.init($("slideBox")); });
就結束了,一些具體細節,例如關於HTML部分,或是動畫的實作等,可以去demo等查看程式碼展示。
不過從效果來看,IE6以及IE7瀏覽器下的滾動並沒有hold頁面的滾動條,多番其他嘗試也是如此,希望可以有相關經驗的同行指點下,優化IE7/IE7瀏覽器下的體驗效果。
原本還想再增加一個自訂捲軸的demo的,一看時間,我勒個去,已經1:11:11了,好不吉利的數字啊,看了下程式設計師運勢萬年曆,今天不適宜寫demo。於是,結語睡覺。
推薦教學:《JS基礎教學》
以上是了解JS滾輪事件(mousewheel/DOMMouseScroll)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

熱AI工具

Undresser.AI Undress
人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool
免費脫衣圖片

Clothoff.io
AI脫衣器

Video Face Swap
使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

熱工具

記事本++7.3.1
好用且免費的程式碼編輯器

SublimeText3漢化版
中文版,非常好用

禪工作室 13.0.1
強大的PHP整合開發環境

Dreamweaver CS6
視覺化網頁開發工具

SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)

不同JavaScript引擎在解析和執行JavaScript代碼時,效果會有所不同,因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析:將源碼轉換為詞法單元。 2.語法分析:生成抽象語法樹。 3.優化和編譯:通過JIT編譯器生成機器碼。 4.執行:運行機器碼。 V8引擎通過即時編譯和隱藏類優化,SpiderMonkey使用類型推斷系統,導致在相同代碼上的性能表現不同。

Python更適合初學者,學習曲線平緩,語法簡潔;JavaScript適合前端開發,學習曲線較陡,語法靈活。 1.Python語法直觀,適用於數據科學和後端開發。 2.JavaScript靈活,廣泛用於前端和服務器端編程。

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1)C/C 是靜態類型語言,需手動管理內存,而JavaScript是動態類型,垃圾回收自動處理。 2)C/C 需編譯成機器碼,JavaScript則為解釋型語言。 3)JavaScript引入閉包、原型鍊和Promise等概念,增強了靈活性和異步編程能力。

JavaScript在Web開發中的主要用途包括客戶端交互、表單驗證和異步通信。 1)通過DOM操作實現動態內容更新和用戶交互;2)在用戶提交數據前進行客戶端驗證,提高用戶體驗;3)通過AJAX技術實現與服務器的無刷新通信。

JavaScript在現實世界中的應用包括前端和後端開發。 1)通過構建TODO列表應用展示前端應用,涉及DOM操作和事件處理。 2)通過Node.js和Express構建RESTfulAPI展示後端應用。

理解JavaScript引擎內部工作原理對開發者重要,因為它能幫助編寫更高效的代碼並理解性能瓶頸和優化策略。 1)引擎的工作流程包括解析、編譯和執行三個階段;2)執行過程中,引擎會進行動態優化,如內聯緩存和隱藏類;3)最佳實踐包括避免全局變量、優化循環、使用const和let,以及避免過度使用閉包。

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好,適合初學者,但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大,JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富,但Python適合從官方文檔開始,JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

Python和JavaScript在開發環境上的選擇都很重要。 1)Python的開發環境包括PyCharm、JupyterNotebook和Anaconda,適合數據科學和快速原型開發。 2)JavaScript的開發環境包括Node.js、VSCode和Webpack,適用於前端和後端開發。根據項目需求選擇合適的工具可以提高開發效率和項目成功率。
