设置滚动条样式

在这篇文章中,我们将学习更多关于滚动条的知识。我知道这听起来并不迷人,但是相信我,设计良好的页面和匹配的滚动条是紧密相连的。旧的镀铬滚动条不太适合。

我们将研究滚动条的细节,然后看一些很酷的例子。

滚动条的组成部分

要设置滚动条的样式,需要熟悉滚动条的解剖结构。请看这张照片:

设置滚动条样式

这里要记住的两个主要组件是:

scrollbar track是滚动条下方的背景。scrollbar humb是用户单击和拖动的部分。

我们可以使用厂商前缀::-webkit-scrollbar选择器来改变整个滚动条的属性。我们可以给滚动条一个固定的宽度,背景色,圆角…很多东西!如果我们自定义页面的主滚动条,那么我们可以直接使用::-webkit-scrollbar:

html::-WebKit-scroll bar {/* Style away!*/}如果我们自定义一个滚动框,这是overflow: scroll的结果,那么我们可以使用::-webkit-scrollbar:

。元素::-webkit-scrollbar { /* Style away!*/}下面是一个简单的例子,它设置HTML元素的滚动条的样式,使其为宽滚动条,背景为红色:

如果我们只是想改变滚动条的滑块或轨道呢?你猜对了——我们分别为这两个元素提供了特殊的前缀伪元素::-webkit-scrollbar-thumb和::-webkit-scrollbar-track。当我们把所有这些东西放在一起时,我们可能会意识到:

给你展示一个三维的自定义滚动条样式,然后打开一个从网络上提取的样本进行大规模的展示以获取灵感。

简单而优雅的滚动条

自定义滚动条仍然可以是最小的。我整理了一组例子,对外观进行了微妙的改变,无论是对拇指还是轨迹的轻色,还是对背景的一些浅色造型。

如你所见,我们不必对滚动条风格着迷。有时候,只需要很小的改变就可以通过滚动条来提升整体的用户体验。

html::-webkit-scrollbar{ width: 50px; background:red;}

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。

发表回复

登录后才能评论