css 双滚动条

在前端网站设计开发中，滚动条是经常会用到的一个功能，但有时候默认的浏览器滚动条并不能满足我们的需求，比如需要横向和纵向同时滚动的情况。这时候就需要使用 CSS 实现双滚动条。

    /* 横向滚动条样式 */    .horizontal-scroll {
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            /* 隐藏浏览器默认滚动条 */        scrollbar-width: none;
            -ms-overflow-style: none;
        /* 自定义滚动条样式 */        ::-webkit-scrollbar {
                width: 10px;
                height: 10px;
        }
        ::-webkit-scrollbar-thumb {
                background: #ccc;
                border-radius: 5px;
        }
    }
    /* 纵向滚动条样式 */    .vertical-scroll {
            overflow-x: hidden;
            overflow-y: auto;
            max-height: 200px;
            /* 隐藏浏览器默认滚动条 */        scrollbar-width: none;
            -ms-overflow-style: none;
        /* 自定义滚动条样式 */        ::-webkit-scrollbar {
                width: 10px;
                height: 10px;
        }
        ::-webkit-scrollbar-thumb {
                background: #ccc;
                border-radius: 5px;
        }
    }
    

上面的样式代码分别实现了横向和纵向滚动条。其中，overflow-x 和 overflow-y 控制滚动条的方向，white-space: nowrap; 防止文本换行导致滚动条失效，scrollbar-width: none; 和 -ms-overflow-style: none; 隐藏浏览器默认滚动条，然后使用 ::-webkit-scrollbar 和 ::-webkit-scrollbar-thumb 自定义滚动条样式。

在 HTML 中需要给横向滚动条和纵向滚动条的容器分别加上上面的类名： div class="horizontal-scroll"> /div> 和 div class="vertical-scroll"> /div> 。

实现双滚动条时，只需要把两个容器嵌套即可：

    div class="horizontal-scroll">
            div class="vertical-scroll">
                // 内容        /div>
        /div>
    

这样就可以实现同时拥有横向和纵向滚动条的容器了。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！