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（不太理想的方式）

<html>

<style>
    #div1{
        width: 100px;
        height: 100px;
        overflow: hidden;
    }

#div2{
        width: 120px;
        height: 100px;
        overflow-wrap: break-word;
        overflow-y:scroll;
    }

</style>

<div id="div1">
    <div id="div2">
        要滚动的内容
    </div>
</div>

<html>

这种方式有以下缺点：

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来控制滚动，主要为了有手机滚屏那种缓慢停止的效果，用jswindow.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();防止选中内容

代码

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>

#scroll-bar
        {
            position: absolute;
            top: 0;
            right: 0;
            width: 10px;
            border-radius: 2px;
            cursor: pointer;
            background-color: rgba(190, 180, 190, 0.50);
        }
        #scroll-bar:hover
        {
            background-color: rgba(175, 175, 175, 0.70);
        }
        #scroll-btn
        {
            position: absolute;
            right: 0;
            width: 10px;
            border-radius: 2px;
            background-color: rgba(130, 158, 175, 0.71);
            background:-webkit-gradient(linear, 0% 0%, 90% 0%,from(rgba(130, 158, 175, 0.91)), to(rgba(222, 235, 245, 0.91)));
            opacity: 0.8;
            cursor: pointer;
        }
        #scroll-btn:hover
        {
            opacity: 1;
        }
    </style>

<div id="div0">
        <div id="div1">
            <div id="div2">
                <div id="div3">
                    要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容
                    要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容
                    要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容
                    要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容
                    要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容要滚动的内容
                </div>
            </div>
        </div>
        
        <div id="scroll-bar">
            <div id="scroll-btn"></div>
        </div>
    </div>

//再此设置滚动条位置大小
scrollBar.style.height = panel.offsetHeight+"px";

function slither()
            {
                if(val1 == null){
                    val1 = setInterval(function(){
                        if(isSlither) {
                            isSlither = false;
                            distance = scrollTop - lastScrollTop;
                            a = distance / 30;
                            lastScrollTop = scrollTop;
                        }

if(distance != 0)
                        {
                            scrollTop += distance / 3.0;
                            panel.scrollTop = scrollTop;
                            if(Math.abs(panel.scrollTop - scrollTop) > 0)
                                lastScrollTop = scrollTop = panel.scrollTop;
                            distance -= a;
                            if(Math.abs(distance) < Math.abs(a))
                                distance = a = 0;
                        }
                        else
                        {
                            clearInterval(val1);
                            val1 = null;
                        }
                    }, 30);
                }
            }

panel.onscroll = function(){
setBar();
}

var mouseMove = function(e)
            {
                isSlither = true;
                if(scrollBarDownY > 0)
                    lastScrollTop = scrollTop = panel.scrollTop = (e.pageY-scrollBar.getBoundingClientRect().top - scrollBarDownY) / panel.getBoundingClientRect().height * panel.scrollHeight;
                wnd.getSelection ? wnd.getSelection().removeAllRanges() : doc.selection.empty(); //防止拖动时选中内容
            }

doc.onmouseup = function(){
                scrollBarDownY = 0;
                doc.onmousemove = null;
            }

scrollBtn.onmousedown = function(e) {
                scrollBarDownY = e.pageY - scrollBtn.getBoundingClientRect().top;
                doc.onmousemove = mouseMove;
                distance = 0;
            }

scrollBar.onmousedown = function(e)
            {
                if(e.pageY < scrollBtn.getBoundingClientRect().top || e.pageY > scrollBtn.getBoundingClientRect().bottom) {
                    scrollBarDownY = 1;
                    distance = 0;
                    lastScrollTop = scrollTop = panel.scrollTop = (e.pageY - scrollBar.getBoundingClientRect().top) / panel.getBoundingClientRect().height * panel.scrollHeight;
                }
            }

scrollBar.onmousewheel = panel.onmousewheel = function(e){
                if (e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件
                    isSlither = true;
                    slither();
                    if (e.wheelDelta > 0) { //当滑轮向上滚动时
                        panel.scrollTop -= step;
                        scrollTop -= step;
                    }
                    if (e.wheelDelta < 0) { //当滑轮向下滚动时
                        panel.scrollTop += step;
                        scrollTop += step;
                    }
                } else if (e.detail) { //Firefox滑轮事件
                    isSlither = true;
                    slither();
                    if (e.detail> 0) { //当滑轮向上滚动时
                        panel.scrollTop -= step;
                        scrollTop -= step;
                    }
                    if (e.detail< 0) { //当滑轮向下滚动时
                        panel.scrollTop += step;
                        scrollTop += step;
                    }
                }
            }
        }
        Scroll("div2", "scroll-bar", "scroll-btn", 5);
    </script>