主容器是用來給里面的東西定位的。內容容器是在滾動的時候調整它的位置以顯示給用戶需要的部分，這個內容容器其實也可以使用scrollTop來實現，不過我比較喜歡使用top來實現。scrollTop的方法的優點是會自動計算滾動的上下限，top的方法我也說不出優點，也許是以前開發桌面程序的緣故，總是覺得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部分。由于這個滾動條效果是隨手寫的，沒有做的很完善，而且這篇文章主要是想介紹鼠標滾輪事件的應用，所以對滾動條我只做了鼠標滾輪的響應。如果需要滾動條的，拖動、點擊定位，等效果。就自己研究了寫吧，如果真寫不出，就吱個聲，那樣我下次就再寫一篇文章來說其它的幾個效果。下面是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 ); //計算滾動條按鈕的高度 //如果把內容容器比作滾動條容器 //那么內容的可見部分就是滾動條按鈕的高度 //而內容的可見部分就是總容器的高度 //所以這里使用總容器高度除以內容容器高度 //如果你想做內容不足就不出滾動條 //你可以在這里判斷高度，不符合就隱藏掉滾動條 scrollbtn.style.height=( panel_h/contents.offsetHeight*100 )+"%"; //計算內容可移動的大距離 c_h=contents.offsetHeight-panel_h; //計算滾動條可移動的大高度 s_h=scrollbar.offsetHeight-scrollbtn.offsetHeight; //創建move方法來移動內容和滾動條 //這個方法的參數是鼠標滾輪滾動的格數 panel.move=function(i){ //計算內容位置 //這里的20是內容的行高，當然也可以是其它值 //但是使用內容的行高對于用戶來說是最友好的 var top=contents.offsetTop+(20*i); //處理位置上下限，防止滾動條溢出 //如果使用scrollTop的方法來做就不需要這個步驟 if(top>0)top=0; if(top<-c_h)top=-c_h; //移動內容位置 contents.style.top=top+"px"; //移動滾動條按鈕位置 //這個計算的原理其實很簡單 //滾動條容器和滾動條按鈕與內容容器和內容可見高度是等比例關系 scrollbtn.style.top=-top/c_h*s_h+"px"; }; //最后是鼠標滾輪事件 //這里同時設置了DOMMouseScroll和onmousewheel事件 //所以可以全兼容，事件參數則在事件中再做判斷 //這個做法的效率不如昨天的完整代碼效率高 //但是鼠標滾輪是一個慢事件，我們可以不要太在乎效率 //至少，這次的代碼比昨天的簡單了好多 panel.addEventListener("DOMMouseScroll", panel.onmousewheel=function(e){ e=e||event; //判斷瀏覽器，并計算事件參數 var v=isFF?-e.detail/3:e.wheelDelta/120; panel.move(v); isIE<9||e.preventDefault(); return false; } ,false);

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

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

成都網站建設公司_創新互聯，為您提供網站收錄、網站設計、做網站、、定制網站、動態網站

廣告

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