滚动条显示隐藏、样式修改

一、控制滚动条显示隐藏

1. css方法

// 隐藏滚动条

overflow: hidden

overflow-x: hidden

overflow-y: hidden

// 显示滚动条

overflow: scroll

overflow-x: scroll

overflow-y: scroll

// 自动判断

overflow: auto

overflow-x: auto

overflow-y: auto

2. js方法

document.getElementById("myElement").style.overflow = "hidden";
document.getElementById("myElement").style.overflow = "scroll";
document.getElementById("myElement").style.overflow = "auto";

如果要加在body上也是一样的写法

document.body.style.overflow = "hidden";
document.body.style.overflow = "scroll";
document.body.style.overflow = "auto";

其中一种应用场景是：如果页面很长，自定义弹框弹出后页面仍然可以滚动。这种情况下可以在弹出弹框的时候用js方法隐藏滚动条，当用户点击关闭按钮或图标的时候再显示出来。

二、滚动条样式修改

通过设置 ::-webkit-scrollbar 伪元素影响滚动条样式，注意它仅在基于 Blink 或 Webkit 的浏览器上可用。

1. ::-webkit-scrollbar（设置整个滚动条的样式）

<!-- html -->
<div class="box">
    text text text text text text text text  
    text text text text text text text text
    text text text text text text text text
    text text text text text text text text
    text text text text text text text text  
    text text text text text text text text
    text text text text text text text text  
</div>
<!-- css -->
.box::-webkit-scrollbar{
    width: 10px;
    height: 10px;
    background-color: red;
}

  

2. ::-webkit-scrollbar-thumb（设置滚动条上滚动滑块的样式）

.box::-webkit-scrollbar-thumb{
    background-color: blue;
}

 

3. ::-webkit-scrollbar-track（设置滑块可滑动区域的样式）

.box::-webkit-scrollbar-track-piece{
    background-color: green;
}

 

5. ::-webkit-resizer（设置调整元素大小的滑块背景色）

当元素设置为可拖动时（resize: horizontal | vertical | both），元素底角会出现可调整元素大小的滑块

.box{
    resize: horizontal;
}

.box::-webkit-resizer{
    background-color: rgb(242, 5, 151);
}

6. ::webkit-scrollbar-button（设置滚动条两端的上下（左右）滚动按钮（上下、左右箭头））

.box::-webkit-scrollbar-button{
    background-color: pink;
    border-radius: 20px;
    width: 20px;
}

7. 一种比较漂亮的滚动条样式

/** ********** 滚动条样式 *********** */
.scrollBar::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}

.scrollBar::-webkit-scrollbar-track {
    border-radius: 50px;
    background-color: #0c434a;
}

.scrollBar::-webkit-scrollbar-thumb {
    border-radius: 50px;
    background-color: #33fefa;
}