鼠標滾輪事件的應(yīng)用簡單的滾動條

　　 　　主容器是用來給里面的東西定位的。內(nèi)容容器是在滾動的時候調(diào)整它的位置以顯示給用戶需要的部分，這個內(nèi)容容器其實也可以使用scrollTop來實現(xiàn)，不過我比較喜歡使用top來實現(xiàn)。scrollTop的方法的優(yōu)點是會自動計算滾動的上下限，top的方法我也說不出優(yōu)點，也許是以前開發(fā)桌面程序的緣故，總是覺得top比較有實感。接著是滾動條容器和滾動條按鈕。滾動條容器就是整個滾動條的部分，滾動條按鈕就是在滾動條容器中可以滑動的那個滑塊。滾動條按鈕用a標簽來做比較好，因為a標簽的hover可以兼容低版本瀏覽器，所以用它效果會更好。 　　接著是CSS的部分 #panel { height:100px;width:200px; overflow:hidden; border:1px solid #CCC; position:relative; } #contents { position:absolute; top:0px;left:0px; font:14px/20px 微軟雅黑; } #scrollbar { width:1px;height:90px; margin:5px; background:#EEE; position:absolute; top:0px;right:0px; } #scrollbtn { position:absolute; width:5px;left:-2px; background:#000; cursor:default; } #scrollbtn:hover {background:#888;} 　　CSS我就不逐行解釋了，看了效果自然會明白。 　　最后也是最重要的就是JS部分。由于這個滾動條效果是隨手寫的，沒有做的很完善，而且這篇文章主要是想介紹鼠標滾輪事件的應(yīng)用，所以對滾動條我只做了鼠標滾輪的響應(yīng)。如果需要滾動條的，拖動、點擊定位，等效果。就自己研究了寫吧，如果真寫不出，就吱個聲，那樣我下次就再寫一篇文章來說其它的幾個效果。下面是JS代碼 //判斷瀏覽器 var isIE=navigator.userAgent.match(/MSIE (\d)/i); isIE=isIE?isIE[1]:undefined; var isFF=/FireFox/i.test(navigator.userAgent); //聲明變量 var panel,contents,scrollbar,scrollbtn,panel_h,c_h,s_h; //獲取元素 contents=document.getElementById("contents"), scrollbar=document.getElementById("scrollbar"), scrollbtn=document.getElementById("scrollbtn"); panel=document.getElementById("panel"); //計算容器高度 //如果這里直接用offsetHeight會獲取到包含邊框的高度 panel_h=parseInt( isIE<9?panel.currentStyle.height :getComputedStyle(panel).height ); //計算滾動條按鈕的高度 //如果把內(nèi)容容器比作滾動條容器 //那么內(nèi)容的可見部分就是滾動條按鈕的高度 //而內(nèi)容的可見部分就是總?cè)萜鞯母叨?//所以這里使用總?cè)萜鞲叨瘸詢?nèi)容容器高度 //如果你想做內(nèi)容不足就不出滾動條 //你可以在這里判斷高度，不符合就隱藏掉滾動條 scrollbtn.style.height=( panel_h/contents.offsetHeight*100 )+"%"; //計算內(nèi)容可移動的大距離 c_h=contents.offsetHeight-panel_h; //計算滾動條可移動的大高度 s_h=scrollbar.offsetHeight-scrollbtn.offsetHeight; //創(chuàng)建move方法來移動內(nèi)容和滾動條 //這個方法的參數(shù)是鼠標滾輪滾動的格數(shù) panel.move=function(i){ //計算內(nèi)容位置 //這里的20是內(nèi)容的行高，當然也可以是其它值 //但是使用內(nèi)容的行高對于用戶來說是最友好的 var top=contents.offsetTop+(20*i); //處理位置上下限，防止?jié)L動條溢出 //如果使用scrollTop的方法來做就不需要這個步驟 if(top>0)top=0; if(top<-c_h)top=-c_h; //移動內(nèi)容位置 contents.style.top=top+"px"; //移動滾動條按鈕位置 //這個計算的原理其實很簡單 //滾動條容器和滾動條按鈕與內(nèi)容容器和內(nèi)容可見高度是等比例關(guān)系 scrollbtn.style.top=-top/c_h*s_h+"px"; }; //最后是鼠標滾輪事件 //這里同時設(shè)置了DOMMouseScroll和onmousewheel事件 //所以可以全兼容，事件參數(shù)則在事件中再做判斷 //這個做法的效率不如昨天的完整代碼效率高 //但是鼠標滾輪是一個慢事件，我們可以不要太在乎效率 //至少，這次的代碼比昨天的簡單了好多 panel.addEventListener("DOMMouseScroll", panel.onmousewheel=function(e){ e=e||event; //判斷瀏覽器，并計算事件參數(shù) var v=isFF?-e.detail/3:e.wheelDelta/120; panel.move(v); isIE<9||e.preventDefault(); return false; } ,false);

好了，注釋已經(jīng)非常詳細了。注釋中已經(jīng)把滾動條的計算方法說的很清楚了，如果你想實現(xiàn)滾動條的拖動，根據(jù)上面說的計算方法也很容易實現(xiàn)。如果還有什么不明白的可以提問。 本文來源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計制作公司-創(chuàng)新互聯(lián)成都公司！

本文標題：鼠標滾輪事件的應(yīng)用簡單的滾動條
當前地址：http://muchs.cn/news47/322047.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、網(wǎng)站設(shè)計、做網(wǎng)站、、定制網(wǎng)站、動態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)