overflow滚动条的样式设置和隐藏

一、样式设置

　1）-webkit-scrollbar：设置水平滚动条的高度，垂直滚动的宽度
    2）-webkit-scrollbar-thumb：设置滚动条里面的滑块样式
    3）-webkit-scrollbar-track：设置滚动条的轨道背景样式
    4）本文默认使用chrome浏览器查看运行效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 设置水平滚动条的高度，垂直滚动的宽度 */
        ::-webkit-scrollbar{
            height: 20px;/* 水平滚动条的高度 */
            width: 20px;/* 垂直滚动的宽度 */
        }
        /* 设置滚动条里面的滑块样式 */
        ::-webkit-scrollbar-thumb{
            background-color: red;
            border: 3px solid blue;
        }
        /* 设置滚动条滑块hover时的背景颜色 */
        ::-webkit-scrollbar-thumb:hover{
            background-color:blueviolet
        }
        /* 设置滚动条的轨道背景样式 */
        ::-webkit-scrollbar-track{
            background-color: bisque;
            border: 3px solid orange;
        }
        /* 设置滚动条的轨道hover时的背景颜色 */
        ::-webkit-scrollbar-track:hover{
            background-color: beige;
        }
        .box{
            width: 150px;
            height: 150px;
            overflow: auto;
            margin-left: 100px;
            border: 1px solid aqua;
        }
        ::scrollbar-arrow-color{
            background-color: #f4ae21;
        }
    </style>
</head>
<body>  
<div class="box" scroll="no">
        AAAAAAAAAAAAAAAAAAAAAAAAAA
        AAAAAAAAAAAAAAAAAAAAAAAAAA
        AAAAAAAAAAAAAAAAAAAAAAAAAA
        AAAAAAAAAAAAAAAAAAAAAAAAAA
        AAAAAAAAAAAAAAAAAAAAAAAAAA
        AAAAAAAAAAAAAAAAAAAAAAAAAA
        AAAAAAAAAAAAAAAAAAAAAAAAAA
        AAAAAAAAAAAAAAAAAAAAAAAAAA
        AAAAAAAAAAAAAAAAAAAAAAAAAA
        AAAAAAAAAAAAAAAAAAAAAAAAAA
        AAAAAAAAAAAAAAAAAAAAAAAAAA
        AAAAAAAAAAAAAAAAAAAAAAAAAA
    </div>
</body>
</html>
 二、隐藏滚动条：
1、去掉水平方向的滚动条：
<div style="overflow-x:hidden">xxx</div>
2、去掉垂直方向的滚动条：
<div style="overflow-y:hidden">xxx</div>
3、隐藏横向、显示纵向滚动条：
<div style="overflow-x:hidden;overflow-y:scroll">xxx</div>
4、隐藏全部滚动条：
<div style="overflow:hidden">xxx</div>
更好的方法就是把滚动条的颜色设置为完全透明，这样既可以实现内容的滚动，又达到不显示滚动条的目的(background-color: transparent;)。
三、附：解释一下overflow属性和不同值得作用：

overflow:visible;不剪切内容也不添加滚动条。默认值。使用该值时，无论设置的"width"和"height"的值是多少，其中的内容无论是否超出范围都将被强制显示。

overflow：auto；在需要时剪切内容并添加滚动条。

overflow：hidden；不显示超过对象高度的内容。

overflow：scroll；总是显示纵向滚动条。

overflow 水平及垂直方向内容溢出时的设置

overflow-x 水平方向内容溢出时的设置

overflow-y 垂直方向内容溢出时的设置

以上属性设置的值为visible、scroll、hidden、auto

hidden 效果与visible相反。任何超出"width"和"height"的内容都会不可见。

scroll 无论内容是否超越范围，都将显示滚动条。

 
posted @ 2023-02-10 16:20  芬-mi  阅读(190)  评论(0)    收藏  举报