CSS中div滚动条样式如何设置

蜗牛 互联网技术资讯 2022-10-01 58 0

这篇文章主要介绍“CSS中div滚动条样式如何设置”,在日常操作中,相信很多人在CSS中div滚动条样式如何设置问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”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滚动条样式如何设置”的学习就结束了,希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习,快去试试吧!若想继续学习更多相关知识,请继续关注蜗牛博客网站,小编会继续努力为大家带来更多实用的文章!

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:niceseo99@gmail.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

评论