html自定义的DIV垂直滚动条

首先说一下自定义滚动条的一个要求：鼠标滚动在它div上滚动时，如果没有滚到顶端或底部则不能影响页面滚动条和系统自带一样

让一个div拥有滚动条

1、只有垂直滚动条

#mydiv1
{
    position: relative;
    overflow-x: hidden;
    overflow-y: scroll;
    width: 100px;
    height: 100px;
}

2、只有水平滚动条

#mydiv2
{
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden;
    width: 100px;
    height: 100px;
}

3、有垂直和水平滚动条

#mydiv3
{
    position: relative;
    overflow: scroll;
    width: 100px;
    height: 100px;
}

在自定义滚动条时我们可以隐藏原来的滚动条，但我们不宜使用下面这种方式：

#mydiv3
{
    position: relative;
    overflow-y: hidden;
    width: 100px;

   overflow-wrap: break-word; 
    height: 100px;
}

如果使用这种方式不好实现用鼠标滚动div时而不滚动页面，且需要靠js代码控制滚动。

我认为好的方案是：

保留它原来的滚动条，然后用其它div遮盖或剪裁掉它的滚动条，这种方式可以使用系统自带的鼠标滚轮滚动div内容，而且不会再滚动div内容时滚动整个页面。

比如我们要自定义div的垂直滚动条可以用以下方式隐藏原来的

方式1（不太理想的方式）

div1">
   

div2">
        要滚动的内容
   

这种方式有以下缺点：

1、我们需要获取浏览器滚动条宽度才好准确的只隐藏 div2的滚动条，我们这里设置 div2的宽度比它外部 div1的宽度多20px,通过div1来剪裁了它超出100px的部分，这只适用于滚动条宽度为20px的情况。

2、 div2内容宽度小于 div2在样式里设置的宽度。

方式2：（个人觉得好的方式）

1、用一个div (div1)包住 有内容的div (div2)，使用 div1滚动 div2（滚动条是 div1的）, div1的宽度大于 div2的宽度（ div1的宽度 - div2的宽度 >= 浏览器滚动条宽度）

2、用另一个div包住地 div1，宽度和 div2的宽度一样，用于把 div1系统自带滚动条隐藏,高度和 div1一样

这样我们就实现了看不见滚动条却可以滚动内容的div，后面实现自己的滚动条就行了

下面是我写的一个例子，不过加了js来控制滚动，主要为了有手机滚屏那种缓慢停止的效果，用js window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();防止选中内容

代码

   
   

   

   
   

       

           

               

                    要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容
                    要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容
                    要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容
                    要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容
                    要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容
               

           

       

       
       

           

       

   

   

   

 
    
         其它内容 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         | 
    
         |