带你了解滚动条的二三事

最新推荐文章于 2024-04-21 09:10:41 发布

Ys@_yxl

最新推荐文章于 2024-04-21 09:10:41 发布

阅读量545

点赞数 2

文章标签：定位 css

本文链接：https://blog.csdn.net/weixin_45817492/article/details/116029966

版权

滚动条

在我们写页面时，有些页面就需要我们为侧边栏写一个美观且实用的滚动条。现在，我将带你进一步了解有关滚动条的设置与美化。

1.滚动条出现的条件

当给父级指定 overflow 属性为 auto ，意思就是设置内容超过滚动条div的设置长度时，就会出现滚动条。

注意:

这里需要注意的重点是一定要给滚动条设置宽高,不能只设置overflow:auto,是出现不了滚动条的。
按照具体情况，有时候如果内容长度不能确定时，对应可以设置最大最小宽高。例如，设置侧边栏的滚动条，侧边栏有折叠面板，折叠面板的子内容长度不一，为了设置最合适的滚动条，按照子内容的最长，最短，来给滚动条设置最大，最小高度。

简单滚动条，主要实现代码如下所示：

  div{
            width: 140px;
            height:140px;
            overflow: auto;
   }
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe consequatur quae iste ipsum sint cum adipisci maxime. Veritatis, voluptatem totam obcaecati doloremque tempore tempora voluptatum impedit placeat distinctio dignissimos officiis?
    </div>

在这里插入图片描述

2.滚动条样式

2.1 Webkit浏览器支持的滚动条样式

::-webkit-scrollbar	滚动条整体部分，其中的属性有width,height,background,border等。
:: -webkit-scrollbar-track	滚动条的轨道。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-thumb	小滑块，滚动条里面可以拖动的那部分
::-webkit-scrollbar-button	滚动条两端的按钮。可以用display:none让其不显示，也可以添加背景图片，颜色改变显示效果。
::-webkit-scrollbar-track-piece	内层轨道，具体区别看下面gif图，需要注意的就是它会覆盖:: -webkit-scrollbar-track的样式。
::-webkit-scrollbar-corner	边角，两个滚动条交汇处

1. ::-webkit-scrollbar 
在这里用 ::-webkit-scrollbar 给滚动条设置宽度，颜色和边框。具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 140px;
            height:140px;
            overflow: auto;
          
        }
       div::-webkit-scrollbar {
            width: 10px;
            background-color: aquamarine;
            border: 3px solid palevioletred;
        }
     /* div::-webkit-scrollbar-track {
		  background-color: #b46868;
	} */
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe consequatur quae iste ipsum sint cum adipisci maxime. Veritatis, voluptatem totam obcaecati doloremque tempore tempora voluptatum impedit placeat distinctio dignissimos officiis?
    </div>
</body>
</html>

最后的效果如下：
在这里给滚动条设置宽度，颜色和边框

2. 滚动条的滑轨背景颜色
设置主要样式如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div{
            width: 140px;
            height:140px;
            overflow: auto;
          
    }
    div::-webkit-scrollbar {
            width: 10px;
        }
     div::-webkit-scrollbar-track {
        background-color: powderblue; 
    }
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe consequatur quae iste ipsum sint cum adipisci maxime. Veritatis, voluptatem totam obcaecati doloremque tempore tempora voluptatum impedit placeat distinctio dignissimos officiis?
    </div>
</body>
</html>

最后的效果如下：
在这里插入图片描述

3.滑块颜色
在2的基础上，添加上设置滑块的颜色

 div::-webkit-scrollbar-thumb {
		  background-color: rgba(0, 0, 0, 0.2); 
	}

最后的效果如下：
在这里插入图片描述

4. 滚动条滑轨两头的监听按钮颜色
在3的基础上，添加上设置滑块的颜色

div::-webkit-scrollbar-button {
		  background-color: palegoldenrod;
	}

最后的效果如下：
在这里插入图片描述
5.滚动条内层轨道

在4的基础上，添加上设置滑块的颜色

div::-webkit-scrollbar-track-piece{
		  background-color: pink;
	}

最后的效果如下：
在这里插入图片描述
我们可以看到这个属性会覆盖掉:: -webkit-scrollbar-track设置的样式。所以，当我们设置这个属性时，可以不设置滚动条轨道属性:: -webkit-scrollbar-track。

7.横向滚动条和纵向滚动条相交处尖角的颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
    div{
            width: 140px;
            height:140px;
            overflow: scroll;
    }
    div::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
     div::-webkit-scrollbar-track {
        background-color: powderblue; 
    }
    div::-webkit-scrollbar-thumb {
		  background-color: rgba(0, 0, 0, 0.2); 
    } 

    div::-webkit-scrollbar-track-piece{
		  background-color: pink;
    }
    
/*定义两端按钮的样式*/
div::-webkit-scrollbar-corner {
background:plum;
}
    </style>
</head>
<body>
    <div>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Saepe consequatur quae iste ipsum sint cum adipisci maxime. Veritatis, voluptatem totam obcaecati doloremque tempore tempora voluptatum impedit placeat distinctio dignissimos officiis?
    </div>
</body>
</html>

最后的效果图如下：
在这里插入图片描述

3.扩展

3.1 position:fixed 固定定位问题(div固定，不随着滚动条滚动)

我之前做移动端项目时，把布局设置成fixed的时候，且设置了overflow-y:scroll，滚动条不显示了。这个问题困扰了我好久，最后，在网上找到了一个解决方法。其原理与解决办法如下：

由于position:fixed绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。不论窗口滚动与否，元素都会留在那个位置。

让div元素固定在浏览器的底部和距离右边的20个像素，设置成这样就可以解决这个问题。
div{
position:fixed;
bottom:0;
right:20px;
}

3.2解决侧边栏的高由子元素撑大时，滚动条不显示的问题

之前写移动端项目时，我写侧边栏只设置overflow:scroll（子元素内容超出，显示滚动条），然后就出现不了滚动条。最后找了大半天，发现没有设置高度。所以，写项目时，一定要细心。
在这里，由于子元素内容不确定。可以按实际情况，由子元素的最大最小高度，给滚动条设置最大，最小高度。

给侧边栏设置一个最小高度与最大高度
例如：
min-height: 400px;
max-height: 801px;

一般侧边栏只用显示右边的滚动条，不用显示下面的滚动条。所以所以设置
overflow-x: hidden !important;
overflow-y: scroll !important;

Ys@_yxl

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
1
评论
带你了解滚动条的二三事

滚动条1.滚动条出现的条件2.滚动条样式2.1 Webkit浏览器支持的滚动条样式3.扩展3.1 position:fixed 固定定位问题(div固定，不随着滚动条滚动)3.2解决侧边栏的高由子元素撑大时，滚动条不显示的问题在我们写页面时，有些页面就需要我们为侧边栏写一个美观且实用的滚动条。现在，我将带你进一步了解有关滚动条的设置与美化。1.滚动条出现的条件当给父级指定 overflow 属性为 auto 时，且子级内容超出规定的范围，就会出现滚动条。主要实现代码如下所示： div{
复制链接

扫一扫