資訊專欄INFORMATION COLUMN
摘要：當(dāng)用戶鼠標(biāo)在滾動條上按下的時候，我們可以假設(shè)他她正在瀏覽網(wǎng)頁內(nèi)容，那么這個時候好的用戶體驗就不能讓滾動條再自動滾動了。為了實現(xiàn)這個功能，可能大家首先會想到的就是和事件了。
轉(zhuǎn)載請注明出處：https://github.com/xinglie/xi...
網(wǎng)頁內(nèi)容區(qū)域自動滾動，滾動條會隨著內(nèi)容的增加自動往下滾動。
當(dāng)用戶鼠標(biāo)在滾動條上按下的時候，我們可以假設(shè)他（她）正在瀏覽網(wǎng)頁內(nèi)容，那么這個時候好的用戶體驗就不能讓滾動條再自動滾動了。
為了實現(xiàn)這個功能，可能大家首先會想到的就是mouse down 和 mouse up事件了。
嗯，我們可以利用它，我們還要識別滾動條的寬度及所在位置，于是我們有了這樣的一個方法：
var getScrollbar=function(){
var e=document.documentElement,
ow=e.offsetWidth,
cw=e.clientWidth;
return {//需要識別滾動條是在左面還是右面，目前沒做處理，簡單示例
left:cw,
width:ow-cw
}
}
getScrollbar獲取滾動條左側(cè)位置，及滾動條的寬度，接下來我們要注冊onmousedown事件，我們注冊在document上
var isOnScrollbar;
document.onmousedown=function(e){
e=e||window.event;
var bar=getScrollbar();
if(e.clientX>bar.left){
isOnScrollbar=true;
document.title="mousedown on scroll bar";
}
}
我們發(fā)現(xiàn)這段代碼可以在IE FF下正常運(yùn)行，接下來注冊mouseup
document.onmouseup=function(e){
if(isOnScrollbar){
document.title="mousedup";
}else{
document.title="mousedup on body";
}
isOnScrollbar=false;
}
發(fā)現(xiàn)除IE外其它瀏覽器都可以正常工作，IE不行，嘗試跟蹤mousemove事件：
document.onmousemove=function(){
window.status=new Date().getTime();
}
發(fā)現(xiàn)鼠標(biāo)在滾動條上按下后移動,mousemove是不觸發(fā)的，而其它瀏覽器是正常觸發(fā)，猜測IE在拖動滾動條開始時
setCapture了，導(dǎo)致其它事件不能正常運(yùn)行，不過發(fā)現(xiàn)鼠標(biāo)在mouseup后，mousemove會觸發(fā)一次，我們可以利用這個
來hack IE下的問題
if(document.attachEvent){
document.onmousemove=function(){
if(isOnScrollbar){
isOnScrollbar=false;
document.title="mousedup";
}
}
}
最終的測試如下：
aa
本例只是拋磚引玉，只提供一個簡單的思路，沒有嚴(yán)格的測試，也許在其它瀏覽器下有問題，歡迎留言交流
歡迎試用magix，區(qū)塊化管理利器 https://github.com/thx/magix/...
magix https://github.com/thx/magix
歡迎star與fork
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/90858.html
摘要：焦點(diǎn)事件一般利用這些事件與方法和屬性配合。此外，支持一個名為的類似事件，也是在鼠標(biāo)滾動滾輪時除法。 焦點(diǎn)事件 一般利用這些事件與document.hasFocus()方法和document.activeElement屬性配合。主要有： blur：元素失去焦點(diǎn)，不會冒泡； DOMFocusIn：同HTML事件focus，于DOM3遭廢棄，選用focusin； DOMFocusOut：同...
摘要：事件與節(jié)點(diǎn)每個瀏覽器事件處理器被注冊在上下文中。事件對象雖然目前為止我們忽略了它，事件處理器函數(shù)作為對象傳遞事件對象。若事件處理器不希望執(zhí)行默認(rèn)行為通常是因為已經(jīng)處理了該事件，會調(diào)用事件對象的方法。 來源：ApacheCN『JavaScript 編程精解 中文第三版』翻譯項目原文：Handling Events 譯者：飛龍 協(xié)議：CC BY-NC-SA 4.0 自豪地采用谷歌翻譯 部分...
閱讀 2503·2023-04-25 19:24
閱讀 1720·2021-11-11 16:54
閱讀 2845·2021-11-08 13:19
閱讀 3562·2021-10-25 09:45
閱讀 2568·2021-09-13 10:24
閱讀 3296·2021-09-07 10:15
閱讀 4059·2021-09-07 10:14
閱讀 2966·2019-08-30 15:56
