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