滚动条css

自定义滚动条现在越来越流行,值得研究。为什么我需要自定义滚动?浏览器的默认滚动条使得UI在多个操作系统下看起来不一致,我们可以通过使用定义滚动来统一样式。

我一直对如何在CSS中自定义滚动条很感兴趣,但一直没有机会这样做。今天,我将记录我的学习过程。

滚动条css

简介

首先,我们需要介绍一下滚动条的组件。滚动条包含跟踪和缩略图,如下图所示:

Track是滚动条的基础,其中thumb是用户拖动的页面或章节内的滚动。

另一个需要记住的重要事情是滚动条可以水平或垂直工作,这取决于设计。此外,当在多语言网站上工作时,这种情况将会改变,该网站在从左到右(LTR)和从右到左(RTL)两个方向上都工作。

自定义滚动条设计

拥有自定义滚动条曾经是webkit的专利,所以Firefox和IE被排除在游戏之外。我们有一个新的语法,只在Firefox中使用。当它得到充分支持时,它将使我们的工作更加容易。我们先看看旧的Webkit语法,然后介绍新的语法。

旧的语法

滚动条的宽度

首先,我们需要定义滚动条的大小。这可以是垂直滚动条的宽度,也可以是水平滚动条的高度。

。section::-WebKit-scroll bar { width:10px;通过这个设置,我们可以设置滚动条本身的样式。

滚动条轨道

这是滚动条的基础。我们可以通过添加背景,阴影,边界半径和边界来塑造它。

。section::-WebKit-scroll bar-track { background-color:dark grey;}滚动条缩略图

准备好滚动条的基础后,我们需要设计滚动条的拇指。这很重要,因为用户可能会拖动这个滑块来与滚动条交互。

。section::-WebKit-scroll bar-thumb { box-shadow:inset 006 pxr GBA(0,0,0,0.3);至此,我们已经介绍了在CSS中自定义滚动条的老方法。让我们探索新的语法。

新语法

滚动条宽度

正如它所说,这定义了滚动条的宽度,有两个值auto和thin。缺点是我们不能像webkit的语法那样定义一个具体的数字。

。第{scrollbar-width:thin节;}滚动条颜色

有了这个属性,我们可以为滚动条轨道和缩略图定义成对值的颜色。

。section { scroll bar-color:# 6969 DD # e0e0e 0;滚动条宽度:细;虽然这种新语法很简单,但它是有限的。我们只能添加颜色。我们不能添加阴影、渐变、圆角或任何类似的东西。我们只允许自定义颜色。

指定自定义滚动条的范围

需要知道的一个重要问题是在哪里定制滚动条。你希望样式对网站上的所有滚动条都通用有效吗?还是只想用在某个特定的部位?

使用旧的语法,我们可以在不将选择器附加到元素的情况下编写选择器,它们将应用于所有可滚动的元素。

::-WebKit-scroll bar { width:10px;}::-WebKit-scroll bar-track { background-color:深灰色;}::-WebKit-scroll bar-thumb { box-shadow:inset 006 pxr GBA(0,0,0,0.3);}如果想只应用于特定部分,需要在选择器前附加一个元素。

。section::-WebKit-scroll bar { width:10px;}.section::-WebKit-scroll bar-track { background-color:dark grey;}.section::-WebKit-scroll bar-thumb { box-shadow:inset 006 pxr GBA(0,0,0,0.3);对于新语法来说,几乎是一样的。我注意到的是,如果你想要一个通用的风格,它应该适用于

html { scroll bar-color:# 6969 DD # e0e0e 0;滚动条宽度:细;}我努力为之工作

现在我们知道了新旧语法是如何工作的,我们开始定制一些滚动条设计。

自定义滚动条设计

示例1

在研究自定义滚动条之前,有必要讨论一下Mac OS中的默认样式。这是它的样子。

滚动条track 的左右两边都有边框,背景色为纯色。滚动条thumb是圆形的,左右两边都有空间。

对于Windows来说,有点不一样。

下面我们根据上面的模拟图自定义滚动条。

。section::-WebKit-scroll bar { width:16px;}.section::-WebKit-scroll bar-track { background-color:# e4e4e 4;边框半径:100像素;}.section::-WebKit-scroll bar-thumb { background-color:# d4aa 70;边框半径:100像素;}有必要为track和thumb添加border-radius,因为它在::webkit-scrollbar上不起作用。

在新的语法中,我们不能调整滚动条的宽度,我们唯一能做的是改变轨迹和拇指的背景颜色。

。第{ scroll bar-color:# d4aa 70 # e4e4e 4;}示例2

对于这个例子,设计有点重,因为它包含了渐变和阴影。我们可以应用内部阴影和渐变来模仿这种效果。我们来看看怎么做!

。section::-WebKit-scroll bar-thumb { background-image:linear-gradient(180 deg,#D0368A0%,# 708 ad 499%);box-shadow:inset 2 px 2 px 5 px 0 rgba(# fff,0.5);边框半径:100像素;}地址示例:https://codepen.io/shadeed/pen/VwpOReG

示例3

我们还可以为thumb和track添加边框,这可以帮助我们处理一些棘手的设计。

。section::-WebKit-scroll bar-thumb { border-radius:100 px;背景:# 8070D4border:6pxsolidrgba(0,0,0,0.2);基于同一个例子,我们可以将上下边界重置为零,这样thumb就会得到一个有趣的效果。请注意拇指顶部和底部的小元素。

地址示例:https://codepen.io/shadeed/pen/qBrGvOx.

可以添加悬停效果吗?

我们可以给新旧语法的滚动条拇指添加悬停效果。

/*旧语法*/。section::-Webkit-scroll bar-thumb:hover { background-color:# 5749 D2;}/*新语法*/。section { scroll bar-color:# d4aa 70 # E4 E4 E4 e 4;过渡:scroll bar-color 0.3放松;}.section:hover { scroll bar-color:# 5749 D2;您可以通过向overflow属性添加visible以外的值,在必要时显示滚动条来创建可滚动元素。建议使用auto关键字,因为它只在内容超出其容器时显示滚动条。

。section { overflow-y:auto;易访问性在自定义滚动条设计时,请记住拇指和轨道要有很好的对比,这样才容易被用户注意到。

考虑下面的自定义滚动条& # 34;坏& # 34;例子。

拇指的颜色几乎看不见。这对用户来说并不好,因为如果他们习惯于通过thumb滚动,会增加他们的难度。

作者:ishadeed译者:前端肖智来源:ishadeed

原文:https://ishadeed.com/article/custom-scrollbars-css/

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

发表回复

登录后才能评论