html自定义的DIV垂直滚动条

html5前端 同时被 2 个专栏收录
5 篇文章 0 订阅
6 篇文章 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>

    <style>
        #div0
        {
            width: 160px;
            position: relative;
            background: rgba(5, 105, 245, 0.11);
            border-radius: 2px;
            margin-left: auto;
            margin-right: auto;
        }
        #div1
        {
            width: 150px;
            height: 100px;
            overflow: hidden;
        }
        #div2
        {
            width: 150px;
            height: 100px;
            padding-right: 60px;
            overflow-y: scroll;
        }
        #div3
        {
            width: 150px;
            padding: 5px;
            overflow-wrap: break-word;
        }

        #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>

    <!--
        div0方便设置滚动条位置,因为滚动条使用结对布局(position: absolute;)所以div0需使用相对布局(position: relative;)
        div1用于隐藏div2的滚动条;
        div2带垂直滚动条div,div3作为其内容被滚动
        div3放内容,限制内容宽度,自动换行;
    -->
    <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>

    <script>
        function Scroll(panelId, scrollBarId, scrollBtnId, step){
            var panel = document.getElementById(panelId);
            var scrollBar = document.getElementById(scrollBarId);
            var scrollBtn = document.getElementById(scrollBtnId);
            var scrollBarDownY = 0, scrollTop = 0.0, lastScrollTop = 0, isSlither = false, distance = 0, a = 0.0;
            var val1 = null;
            var wnd = window, doc = document;

            //再此设置滚动条位置大小
            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);
                }
            }


            var setBar = function(){
                var scan = panel.getBoundingClientRect().height / panel.scrollHeight;
                if(scan >= 1) {
                    scrollBtn.style.display = "none"
                }
                else{
                    scrollBtn.style.display = "block"
                    scrollBtn.style.height = (scan * 100)+"%";
                    scrollBtn.style.top = (panel.scrollTop / panel.scrollHeight * 100)+"%";
                }
            }
            setTimeout(function(){setBar();}, 1000);

            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>

    <pre>
        其它内容
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
        |
    </pre>
</body>
</html>




  • 4
    点赞
  • 0
    评论
  • 10
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值