html自定义的DIV垂直滚动条

最新推荐文章于 2024-03-10 13:55:43 发布

明道无界

最新推荐文章于 2024-03-10 13:55:43 发布

阅读量1.8w

点赞数 6

分类专栏： html5前端 js 文章标签：自定义的div滚动条 html 滚动不影响页面滚动 js防止选中

本文链接：https://blog.csdn.net/u012681635/article/details/51751769

版权

js 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html5前端

5 篇文章 0 订阅

订阅专栏

首先说一下自定义滚动条的一个要求：鼠标滚动在它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来控制滚动，主要为了有手机滚屏那种缓慢停止的效果，用js window.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>

明道无界

关注

6
点赞
踩
18

收藏

觉得还不错? 一键收藏
2
评论
html自定义的DIV垂直滚动条

首先说一下自定义滚动条的一个要求：鼠标滚动在它div上滚动时，如果没有滚到顶端或底部则不能影响页面滚动条和系统自带一样让一个div拥有滚动条1、只有垂直滚动条#mydiv1{ position: relative; overflow-x: hidden; overflow-y: scroll; width: 100px;
复制链接

扫一扫