CSS中div滚动条样式设置
- 2022-09-15 09:25:28
- 3171次 极悦
大家在Java教程中会学到CSS，下面我们就来了解一下CSS中div滚动条样式设置。
自定义滚动条设计
曾经有一个自定义滚动条只是 webkit，所以 Firefox 和 IE 被淘汰了。我们有一个只在 Firefox 中有效的新语法，当它被完全支持时，它会让我们的工作变得更容易。下面将介绍旧的 Webkit 语法，然后是新的语法。
旧语法
滚动条宽度
首先，我们需要定义滚动条的大小。这可以是垂直滚动条的宽度和水平滚动条的高度。
.section::-webkit-scrollbar {
width: 10px;
}
使用该设置，我们可以设置滚动条本身的样式。
滚动条轨道
这表示滚动条的底部。我们可以通过添加背景颜色、阴影、边框半径和边框来设置它的样式。
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
滚动条拇指
一旦我们准备好滚动条的底部，我们需要设置滚动条拇指的样式。这很重要，因为用户可能会拖动此拇指与滚动条进行交互。
.section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
至此，我们已经介绍了在 CSS 中设置自定义滚动条样式的旧方法。让我们探索新的语法。
新语法
滚动条宽度
正如它所说，这定义了滚动条的宽度，我们最关心的值是auto和thin。不幸的是，我们不能像 webkit 语法那样定义一个特定的数字。
.section {
scrollbar-width: thin;
}
滚动条颜色
使用此属性，我们可以将滚动条轨道和拇指的颜色定义为对值。
.section {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
就像这种新语法一样简单，但它是有限制的。我们只能应用纯色。我们不能添加阴影、渐变、圆角或类似的东西。我们可以自定义的只是颜色。
滚动条装订线
你有没有想过当内容在滚动容器中增长时我们如何避免布局变化?让我们看下面的案例。
.box {
padding: 1rem;
max-height: 220px;
overflow-y: auto;
}
我们有一个16px四面都有填充物的容器。到现在为止，内容很短，滚动条没有显示，因为overflow-y: auto被使用(友情提示：当auto被使用时overflow-y，直到内容很长才会显示滚动条)。
当内容增长时，将显示滚动条，因此可用于内容的空间将减少。
注意当有滚动条时内容是如何移动的。那是因为浏览器应该为滚动条保留空间。
值得庆幸的是，现在可以通过scrollbar-gutter(在基于 Chromium 的浏览器 v94+ 中支持)来解决这个问题。它的工作方式可以让我们提前预订空间。默认值为auto，其他值为stable。还值得一提的是，有一个可选值both-edges显示两侧的排水沟。
.box {
padding: 1rem;
max-height: 220px;
overflow-y: auto;
scrollbar-gutter: stable;
}
指定自定义滚动条的范围
要知道的重要一点是自定义滚动条的位置。您是否希望样式通用并适用于网站上的所有滚动条?还是您只希望它用于特定部分?
使用旧语法，我们可以编写选择器而不将它们附加到元素，它们将应用于所有可滚动元素。
::-webkit-scrollbar {
width: 10px;
}
::-webkit-scrollbar-track {
background-color: darkgrey;
}
::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
但是，如果您只想申请特定部分，则需要在选择器之前附加该元素。
.section::-webkit-scrollbar {
width: 10px;
}
.section::-webkit-scrollbar-track {
background-color: darkgrey;
}
.section::-webkit-scrollbar-thumb {
box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
对于新的语法，几乎是一样的。如果你想要一个通用样式，它应该应用于<html>元素，而不是<body>.
html {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
以上就是关于“CSS中div滚动条样式设置”的介绍，大家如果想了解更多相关知识，可以关注一下极悦的CSS视频教程，里面的课程内容由浅到深，通俗易懂，适合小白学习，希望对大家能够有所帮助。
选你想看
你适合学Java吗？4大专业测评方法
代码逻辑 吸收能力 技术学习能力 综合素质
先测评确定适合在学习
价值1998元实验班免费学
在线咨询
免费试学