小編給大家分享一下原生JS怎么實(shí)現(xiàn)自定義滾動(dòng)條效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

成都地區(qū)優(yōu)秀IDC服務(wù)器托管提供商(成都創(chuàng)新互聯(lián)).為客戶提供專業(yè)的成都服務(wù)器托管,四川各地服務(wù)器托管,成都服務(wù)器托管、多線服務(wù)器托管.托管咨詢專線：13518219792

JS是什么

JS是JavaScript的簡稱，它是一種直譯式的腳本語言，其解釋器被稱為JavaScript引擎，是瀏覽器的一部分，主要用于web的開發(fā)，可以給網(wǎng)站添加各種各樣的動(dòng)態(tài)效果，讓網(wǎng)頁更加美觀。

具體內(nèi)容如下

實(shí)現(xiàn)思路：

1.外層設(shè)置一個(gè)div,在外層的div里面設(shè)置一個(gè)特別高的div(高度為外層5個(gè)div的高度)，在高的div里面設(shè)置5個(gè)div，每個(gè)div的高度，都和父級(jí)的高度相同
2.在外層div的右側(cè)邊框以里自定義一個(gè)滾動(dòng)條，（本人用div設(shè)置樣式作為滾動(dòng)條）
3.最外層的div添加onmousewheel事件，使用e.wheelDelta來獲取每次滑動(dòng)的距離，若為正數(shù)則向上滑動(dòng)，將每次增加的數(shù)，賦給滾動(dòng)條的top值，若為負(fù)數(shù)則向下互動(dòng)，將每次減少的值，賦值給滾動(dòng)條的top值，并對(duì)特別高的div作對(duì)應(yīng)的上下平移處理
4.注意：滾動(dòng)條的高度需要和高的div的高度成比例滑動(dòng)

 
 
   
     
     
     
      *{ 
        padding: 0; 
        margin: 0; 
      } 
      #wrap{ 
        height: 500px; 
        width: 300px; 
        position: relative; 
        /*超出隱藏*/ 
        overflow: hidden; 
        margin: 200px auto 0; 
        border: 3px solid black; 
      } 
      #content{ 
        width: 300px; 
        /*不需要設(shè)置高度，可被圖片撐開*/ 
        position: absolute; 
        left: 0; 
        top: 0; 
        border: 1px solid red; 
      } 
      #content > div{ 
        width: 294px; 
        /*去除圖片間的間隙*/ 
        vertical-align: top; 
        height: 500px; 
        border: 1px solid red; 
        text-align: center; 
        font-size: 100px; 
        line-height: 500px; 
      } 
      #sliderWrap{ 
        height:100% ; 
        width:16px ; 
        background-color: greenyellow; 
        position: absolute; 
        right: 0; 
        top: 0; 
      } 
      #slider{ 
        width: 10px; 
        height: 50px; 
        background-color: blue; 
        position: absolute; 
        left: 3px; 
        top: 0px; 
        border-radius: 10px; 
      } 
     
   
   
     
       
        
1
 
        
2
 
        
3
 
        
4
 
        
5