Javascript和jquery事件--滾動條事件和自定義滾動條事件樣式

很想把滾動條事件跟鼠標滾輪事件放在一起，那就直接寫在這一篇了。除了事件以外，對滾動條樣式的調整也記在這里吧。

滾動條是瀏覽器的默認事件，使用overflow:auto/scroll都有可能出現，它的默認事件在各個瀏覽器大多一樣，它的樣式在各瀏覽器都有不同的表現。但是通過js我們可以阻止它的默認事件，使用css也可以在一定程度上更改它的樣式。如果你不想要瀏覽器的滾動條，你可以通過監聽鼠標滾輪事件以及使用動畫（就像輪播圖片那樣）自定義事件，推薦js事件應用（帶框拖拽、自定義滾動條），但是這里就不做深入了。

(1)滾動條事件

瀏覽器自定的滾動條有以下特點：

　　a.默認事件是元素上鼠標滾輪帶動滾動條和界面滾動以及鼠標拖拽滾動條會帶動界面滾動。

　　b.元素上鼠標滾動時默認禁止冒泡，元素內滾動條事件不會帶動父元素及祖先元素的滾動事件。

　　c.該元素滾動條滾動條滾動到頂部（底部）后繼續往上（往下）滾動的話，會觸發滾動父元素的事件（這是默認事件，與冒泡無關）

 

　　在scroll事件對象里面我們要關注的值是觸發事件元素的：

　　　　①scrollTop/scrollLeft:滾動的距離，一開始默認都是0，往下滾動scrollTop增加，往右scrollLeft增加。

　　　　②scrollHeight/scrollWidth:整個頁面內容的大小，包括被隱藏的部分。

　　　　③clientHeight/clientWidth:視圖顯示部分的大小

　　如果要實現：

　　　　①判斷滾動方向，記錄之前的scrollTop，然后觸發后進行比較判斷

　　　　②判斷是否到達頂部底部，scrollTop為0到達頂部,scrollTop+clientHeight==scrollHeight到達底部

　

            var f1top = document.getElementById('f1').scrollTop;
            function topOrBottom(e){
                var e = e||event||window.event;
                var element = e.target||e.srcElement;
                var scrollTop = element.scrollTop;
                var scrollHeight = element.scrollHeight;
                var clientHeight = element.clientHeight;
                
                //上下滾動的時候，scrollTop=0時滾動條在頂部，scrollTop+clientHeight=scrollHeight時滾動條在底部
                if(scrollTop==0){
                    console.log('到了頂部！');
                }
                else if(scrollTop+clientHeight==scrollHeight){
                    console.log('到了底部！');
                }
                //判斷滾動方向
                
                var f = scrollTop - f1top;
                f1top = scrollTop;
                
                if(f>0){
                    console.log('向下');
                }
                else if(f<0){
                    console.log('向上');
                }
            }
            //js
            document.getElementById('f1').onscroll=topOrBottom;

 

那么scroll事件和鼠標滾輪事件WheelEvent有什么關系和區別呢？滾輪事件只是觸發onscroll事件的條件之一（另一個是拖動滾動條），滾輪事件是一次滾動鼠標滾輪，而在這一次滾輪之中，會大約每15毫秒觸發一次該元素的onscroll事件（如果該元素可以滾動），如果該元素不可以滾動（或者到頂到底了），就會按順序觸發該元素的祖先元素中的可滾動元素。

我關注到滾動條事件的原因就是要禁用掉滾動條滾動到底部繼續進行鼠標滾輪滾動會觸發父元素滾動事件的默認事件。元素的滾動條事件是綁定在元素滾輪事件上面的默認事件，而在滾動條滾動到底部再進行一次向下滾動鼠標滾輪的操作，就不會再觸發該元素的scroll事件，而是按順序觸發父元素的scroll事件，這同樣是默認事件，所以阻止冒泡是不可行的，而單純地阻止默認事件也是不可行的。具體來說，我就是要監聽鼠標滾輪事件，當事件觸發時出現元素已經到達底部並且這次滾輪方向也是向下（頂部情況相反）時，禁用默認事件。代碼如下：

/*阻止鼠標滾動事件聯動*/
function StopP(e){ 
    e = e||window.event;
    
    if (e.stopPropagation) { //取消冒泡
        e.stopPropagation();
    } else{
        e.cancelBubble = true;
    };
    var scrollup = false; 
    /*判斷鼠標滾動方向*/
    if (e.wheelDelta) {  //判斷瀏覽器IE，谷歌滑輪事件               
            if (e.wheelDelta > 0) { //當滑輪向上滾動時  
               scrollup = true;
    }  
　　} else if (e.detail) {  //Firefox滑輪事件  
            if (e.detail> 0) { //當滑輪向上滾動時  
               scrollup = true;
              
            }   
   }  
        
    var ele=e.target||e.srcElement;
    var eleheight = ele.clientHeight;//視圖高度
    var conheight = ele.scrollHeight;//內容高度
    var scrtop = ele.scrollTop;//滾動條離頂部距離
    var c = 0;
        
    /*阻止滾動條到達頂部、底部時帶動body的滾動*/
    if(scrollup==true&&scrtop==0){
           c = 1;
     }
     if(scrollup==false&&(scrtop+eleheight>=conheight)){
           c = 1;
     }
     if(c==1){
        if (e.preventDefault) {//取消默認行為
            e.preventDefault();
         } else{
            e.returnValue = false;
          };
      }
        
        
}        

 

(2)  滾動條自定義樣式

默認滾動條不符合要求，需要自定義或者隱藏滾動條。按常規方法來說谷歌和ie都提供了在css中更改滾動條樣式的方法，但是限制都很大，而且都不怎么兼容。火狐則沒有提供方法，但是可以使用插件。下面是一段谷歌，ie修改css的代碼，引用自（https://blog.csdn.net/zh_rey/article/details/72473284）

/*滾動條樣式*/
            .myscroll::-webkit-scrollbar{/*滾動條整體部分，其中的屬性有width,height,background,border等（就和一個塊級元素一樣）（位置1）*/
                width:10px;
                height:10px;
            }
            .myscroll::-webkit-scrollbar-button{/*滾動條兩端的按鈕，可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果（位置2）*/
                background:#74D334;
            }
            .myscroll::-webkit-scrollbar-track{/*外層軌道，可以用display:none讓其不顯示，也可以添加背景圖片，顏色改變顯示效果（位置3）*/
                background:#FF66D5;
            }
            .myscroll::-webkit-scrollbar-track-piece{/*內層軌道，滾動條中間部分（位置4）*/
                background:#FF66D5;
            }
            .myscroll::-webkit-scrollbar-thumb{/*滾動條里面可以拖動的那部分（位置5）*/
                background:#FFA711;
                border-radius:4px;
            }
            .myscroll::-webkit-scrollbar-corner {/*邊角（位置6）*/
                background:#82AFFF; 
            }
            .myscroll::-webkit-scrollbar-resizer  {/*定義右下角拖動塊的樣式（位置7）*/
                background:#FF0BEE;
            }
            .myscroll{
                scrollbar-arrow-color: #f4ae21; /**//*三角箭頭的顏色*/ 
                scrollbar-face-color: #333; /**//*立體滾動條的顏色*/ 
                scrollbar-3dlight-color: #666; /**//*立體滾動條亮邊的顏色*/ 
                scrollbar-highlight-color: #666; /**//*滾動條空白部分的顏色*/ 
                scrollbar-shadow-color: #999; /**//*立體滾動條陰影的顏色*/ 
                scrollbar-darkshadow-color: #666; /**//*立體滾動條強陰影的顏色*/ 
                scrollbar-track-color: #666; /**//*立體滾動條背景顏色*/ 
                scrollbar-base-color:#f8f8f8; /**//*滾動條的基本顏色*/ 
            }

 我還看到了一個方法，能做到隱藏滾動條，配合js就可以自定義滾動樣式了。那就是在有滾動條的元素'#c1'外層套一個div，設置寬度是'#c1'不包括滾動條的寬度並設置overflow:hidden。這樣的話界面中就不會看到滾動條（即使它其實還在），你也可以自己設置新滾動條的樣式，然后綁定事件來設置滾動。

參考：

https://www.cnblogs.com/liuyanxia/p/8675752.html