html如何設置滑輪效果,HTML中鼠標滾輪事件onmousewheel處理

滾輪事件是不同瀏覽器會有一點點區別,一個像Firefox使用DOMMouseScroll ,ff也可以使用addEventListener方法綁定DomMouseScroll事件,其他的瀏覽器滾輪事件使用mousewheel,下面我來給大家具體介紹。

Firefox使用DOMMouseScroll,其他的瀏覽器使用mousewheel。滾動事件觸發時Firefox使用detail屬性捕捉滾輪信息,其他的瀏覽器使用wheelDelta。不知道為何在該問題上其他廠商和微軟的如此一致。Firefox可以使用addEventListener方法綁定DomMouseScroll事件。

elem.addEventListener(‘DOMMouseScroll’, func, false);IE和其他的主流瀏覽器可以使用傳統的事件綁定模型。但不要使用IE專有的attachEvent方法,其他主流瀏覽器并不識別微軟的這個方法。

?Firefox 鼠標滾輪向上滾動是-3,向下滾動是3

?IE 鼠標滾輪向上滾動是120,向下滾動是-120

?Safari 鼠標滾輪向上滾動是360,向下滾動是-360

?Opera 鼠標滾輪向上滾動是120,向下滾動是-120

?Chrome 鼠標滾輪向上滾動是120,向下滾動是-120

有人在Safari下做了一些測試:”只是滾動一圈的話,值為+-0.1,如果滾動地稍微快點的話(多滾動幾圈),這個值也會變大。 這是因為Mac OS下有鼠標滾輪加速功能。滾動一次,瀏覽器滾動1像素,滾動3次,瀏覽器卻滾動30像素”。同時他也對Camino(基于Gecko的內核引擎)進行研究:“與Safari相似(+- 0.3 to +-Infinity),雖然使用了與firefox相同的內核引擎,但結果這個delta值卻只在+-2.666666里浮動,無論滾動速度如何

其中經我測試:

IE/Opera屬于同一類型,使用attachEvent即可添加滾輪事件。

/*IE注冊事件*/

if(document.attachEvent){

document.attachEvent('onmousewheel',scrollFunc);

}

Firefox使用addEventListener添加滾輪事件

/*Firefox注冊事件*/

if(document.addEventListener){

document.addEventListener('DOMMouseScroll',scrollFunc,false);

}

Safari與Chrome屬于同一類型,可使用HTML DOM方式添加事件

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

其中除Firefox外其余均可使用HTML DOM方式添加事件,因此添加事件使用以下方式

/*注冊事件*/

if(document.addEventListener){

document.addEventListener('DOMMouseScroll',scrollFunc,false);

}//W3C

window.onmousewheel=document.onmousewheel=scrollFunc;//IE/Opera/Chrome

detail與wheelDelta

判斷滾輪向上或向下在瀏覽器中也要考慮兼容性,現在五大瀏覽器(IE、Opera、 Safari、Firefox、Chrome)中Firefox 使用detail,其余四類使用wheelDelta;兩者只在取值上不一致,代表含義一致,detail與wheelDelta只各取兩個 值,detail只取±3,wheelDelta只取±120,其中正數表示為向上,負數表示向下。

滾動值:(IE/Opera)

滾動值:(Firefox)

var oTxt = document.getElementById("txt");

var scrollFunc = function (e) {

var direct = 0;

ee = e || window.event;

var t1 = document.getElementById("wheelDelta");

var t2 = document.getElementById("detail");

if (e.wheelDelta) {//IE/Opera/Chrome

t1.value = e.wheelDelta;

} else if (e.detail) {//Firefox

t2.value = e.detail;

}

ScrollText(direct);

}

/*注冊事件*/

if (document.addEventListener) {

document.addEventListener('DOMMouseScroll', scrollFunc, false);

}//W3C

window.onmousewheel = document.onmousewheel = scrollFunc; //IE/Opera/Chrome/Safari

轉載自:http://www.2cto.com/kf/201502/376772.html

HTML中鼠標滾輪事件onmousewheel

IE/Opera屬于同一類型,使用attachEvent即可添加滾輪事件. /*IE注冊事件*/ if(document.attachEvent){ document.attachEvent('onm ...

js中鼠標滾輪事件詳解

js中鼠標滾輪事件詳解 ? (以下內容部分內容參考了http://adomas.org/javascript-mouse-wheel/ ) 之前js 仿Photoshop鼠標滾輪控制輸入框取值中已使用 ...

鼠標滾輪事件 onmousewheel

1.fiefox:DOMMouseScroll ? ? ? ? ? ? ??detail ? ? ?detail*(-40)=wheelDelta 除了firefox之外:mousewheel ? ? ...

JavaScript中的鼠標滾輪事件詳解

JavaScript中的鼠標滾輪事件詳解/*Firefox注冊事件*/ ~~~Firefox: addEventListener('DOMMouseScroll', handler, false)if ...

Winform 中panel的mousewheel鼠標滾輪事件觸發

如果將窗體或容器控件(如Panel控件)的AutoScroll屬性設置為True時,那么當窗體或Panel容不下其中的子控件時就會出現 滾動條,通過移動滾動條可以上下顯示出窗體或Panel中的全部內容 ...

js中的鼠標滾輪事件

## 事件對象 event 1 event事件對象,表示用來獲取事件的詳細信息,比如得到鼠標的橫坐標:事件對象.clientX(clientX是可視區坐標) window.onclick = func ...

鼠標滾輪事件MouseWheel

其實在大多數瀏覽器(IE6, IE7, IE8, Opera 10+, Safari 5+,Chrome)中,都提供了 "mousewheel" 事件.但杯具的是 Firefox ...

js整頻滾動展示效果(函數節流鼠標滾輪事件)

ttp://schemas.android.com/apk/res/android& ...

sql按照in中的順序進行排序 mysql

經測試以下三種情況,都可以. SELECT a.id,a.name as goods_name,a.logoimg,b.name as store_name FROM sh_goods a LEFT ...

haxe 嵌入swf 讀取里面的內容

首先安裝 swf 庫,運行命令: 命令提示符: haxelib install swf 在project.xml 加上

1.Linux下libevent和memcached安裝

 1 下載libevent-2.0.22-stable.tar.gz,下載地址是:http://libevent.org/ 2 下載memcached,下載地址是:http://memcached ...

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/454541.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/454541.shtml
英文地址,請注明出處:http://en.pswp.cn/news/454541.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

在OOW2009上尋寶撞大運續(床上篇)

歷時5天的Oracle Open World 2009終于,終于結束了。今天最后的節目是去聽一場金融分析師的會議,“只”開了不到6個鐘。去的時候是毛毛雨,回來的時候終于看到了一縷陽光。說夕陽無限好不大合適。用Larry Ellison的說法是“太陽落下的地方也是太…

skynet記錄6:定時器

稍后填坑 kernel中,每一次時鐘中斷會trap到kernel code,這個時間間隔稱之為jiffies,每秒鐘發生的次數為HZ 如果是4核,分配到每個核就是HZ/4 cat /boot/config-uname -r | grep ^CONFIG_HZ 輸出: CONFIG_HZ250 cat /pro…

html圖片平鋪不重復整個頁面,JSP網頁背景圖片怎樣不平鋪,不重復出現啊...

2016-07-10 13:12最佳答案1,Q:怎樣把別人網頁上的背景音樂保存下來?A:瀏覽該網頁后,在你的 Windows\Temporary Internet Files 文件夾下可以找到該背景音樂的緩存文件,拷貝出來即可使用。如果還是找不見該文件,可以打開網頁的源文件,找到音樂…

特征圖注意力_從數據結構到算法:圖網絡方法初探

作者 | 朱梓豪來源 | 機器之心原文 | 從數據結構到算法:圖網絡方法初探如果說 2019 年機器學習領域什么方向最火,那么必然有圖神經網絡的一席之地。其實早在很多年前,圖神經網絡就以圖嵌入、圖表示學習、網絡嵌入等別名呈現出來,其…

FFMPEG 源碼分析

FFMPEG基本概念: ffmpeg是一個開源的編解碼框架,它提供了一個音視頻錄制,解碼和編碼庫。FFMPEG是在linux下開發的,但也有windows下的編譯版本。 ffmpeg項目由以下幾部分組成: ffmpeg 視頻文件轉換命令行工具,也支持經過實時電視…

面試之 Redis匯總

簡介 Redis 持久化機制 RDB(Redis DataBase) AOF(Append-only file) Redis 4.0 對于持久化機制的優化 補充:AOF 重寫 二者的區別 二者優缺點 Memcache與Redis的區別都有哪些? 緩存雪崩、緩存穿透、…

Oracle 10g 問題集錦

監聽服務中Oracle數據庫之中使用最主要的一個服務,但是這個服務經常會出現錯誤,包括以后在工作之中此服務也會出現錯誤,故給出兩種常見錯誤的解決方案(故障1、故障2) 故障1: 注冊表使用了優化軟件(如&#…

iOS linker command failed with exit code 1 (use -v to see invocation)多種解決方案匯總

有時可能會遇到這種錯誤,關鍵是這種錯誤,有時只有這一句話,也不會給更多錯誤信息。 網上找了一些,總結了如下:(PS:以下是按照解決簡易程度排序,不代表出現概率) 1、bitco…

計算機二級python選擇題題庫_2018年計算機二級python題庫精編(1)

1正則中的^符號,用在一對中括號中則表示要匹配() A.字符串的開始 B.除中括號內的其它字符 C.字符串的結束 D.僅中括號內含有的字符 2靜態成員變量稱為類變量,非靜態成員變量稱為實例變量,下列關于一個類的靜態成員的描述中,不正確…

非常好用!世界上最快最好的視頻壓縮轉換工具(精品)

測試了20多款 各種視頻壓縮 截取軟件 真的是這款最快 快好用 效果也好!!! 最快的視頻轉換壓縮工具。 WisMencoder 能夠把您的電腦上的所有視頻格式,包括avi,mpg,rmvb,wmv,mp4,mov,dat等格式以最快的速度和最高的質量轉換為…

面試之 Mysql 匯總

事務相關 什么是事務? 事務:是由一組SQL語句組成的邏輯處理單元,事務具有以下4個屬性,通常簡稱為事務。事務的ACID屬性: (1)原子性(Atomicity):   事務是一…

Exchange Server 2003 部署手冊

1. 環境需求服務器: 域控制器1臺; Exchange Server服務器1臺。 IP和機器名配置: 域控制器:機器名:dc IP: 10.10.10.200 掩碼:255.255.255.0 網關:10.10.10.254 DNS:127.0.0.1 Exchange&#xff…

app中 html5 search 事件,事件 - Cordova中文網

事件Cordova給我們提供了很多的事件,可以在應用程序中使用。應用程序代碼中可以添加這些事件的監聽。例如:HTML文件Device Ready ExampleJS文件// example.js文件// 等待設備API庫加載好//function onLoad() {document.addEventListener("deviceready", o…

python標準庫os中的方法_python中OS常用方法

下面列出了一些在os模塊中比較有用的部分。它們中的大多數都簡單明了。 os.sep可以取代操作系統特定的路徑分隔符。windows下為 “\\” os.name字符串指示你正在使用的平臺。比如對于Windows,它是nt,而對于Linux/Unix用戶,它是posix。 os.get…

ffmpeg 過程分析

簡介 FFmpeg是一個集錄制、轉換、音/視頻編碼解碼功能為一體的完整的開源解決方案。FFmpeg的開發是基于Linux操作系統,但是可以在大多數操作系統中編譯和使用。FFmpeg支持MPEG、DivX、MPEG4、AC3、DV、FLV等40多種編碼,AVI、MPEG、OGG、Matroska、ASF等…

面試之 Python 基礎

1:為什么學習Python 家里有在這個IT圈子里面,也想讓我接觸這個圈子,然后給我建議學的Python,然后自己通過百度和向有學過Python的同學了解了Python,Python這門語言,入門比較簡單,它簡單易學&…

學習筆記(11月08日)--異常

四周三次課(11月8日)異常即是一個事件,該事件會在程序執行過程中發生,影響了程序的正常執行。一般情況下,在Python無法正常處理程序時就會發生一個異常。異常是Python對象,表示一個錯誤。當Python腳本發生異…

html瀏覽器的區別是什么意思,不同瀏覽器對css的識別有區別嗎?

不同瀏覽器對css的識別是有區別,因此針對不同的瀏覽器去寫不同的CSS。下面本篇文章給大家介紹一些常用CSS書寫技巧(不同瀏覽器之間的差異)。有一定的參考價值,有需要的朋友可以參考一下,希望對大家有所幫助。不同的瀏覽器,比如Int…

關于python

你是如何自學 Python 的? https://www.zhihu.com/question/20702054 Python 的練手項目有哪些值得推薦?https://www.zhihu.com/question/29372574 Python編碼規范 -- Python Style Guide http://www.cnblogs.com/lxw0109/p/Python-Style-Guide.htm…

python讀寫文件的文本模式_Python中文件的讀寫、寫讀和追加寫讀三種模式的特點...

本文主要討論一下文件的三種可讀可寫模式的特點及互相之間的區別,以及能否實現修改文件的操作 由于前文已經討論過編碼的事情了,所以這里不再研究編碼,所有打開操作默認都是utf-8編碼(Linux系統下) 首先我們看r(讀寫&a…