自定义滚动条现在越来越流行,值得研究。下面的文章将带您了解滚动条的组成部分,并介绍如何使用CSS自定义滚动条样式。

css如何设置滚动条样式(css怎么设置滚动条样式)

(学习视频分享:css视频教程)

为什么需要定制滚动?浏览器的默认滚动条使UI在多个操作系统中看起来不一致。我们可以使用定义滚动来统一风格。

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

css如何设置滚动条样式(css怎么设置滚动条样式)

简介

首先,我们需要介绍滚动条的组成部分。滚动条包括滚动条。 trackthumb,下图如下:

css如何设置滚动条样式(css怎么设置滚动条样式)

track它是滚动条的基础,其中之一 thumb用户拖动支页或章节中的滚动。

还有一件重要的事情要记住,滚动条可以水平或垂直工作,这取决于设计。此外,在多语言网站上工作时,这也会发生变化,网站从左到右(LTR)和从右到左(RTL)在两个方向上工作。

css如何设置滚动条样式(css怎么设置滚动条样式)

自定义滚动条设计

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

1、旧的语法

滚动条的宽度

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

.section::-webkit-scrollbar {
    width: 10px;
}

有了这个设置,我们可以设置滚动条本身的样式。

滚动条 track

这代表了滚动条的基础。通过添加,我们可以添加它。backgroundshadowsborder-radiusborder对其进行造型。

.section::-webkit-scrollbar-track {
    background-color: darkgrey;
}

滚动条 thumb

在准备好滚动条的基础后,我们需要对滚动条进行准备thumb风格设计。这很重要,因为用户可能会拖动这一点thumb与滚动条交互。

.section::-webkit-scrollbar-thumb {
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}

到目前为止,我们已经介绍了CSS中定制滚动条的老方法。让我们探索一下新的语法。

2、新语法

Scrollbar Width

正如它所说,这定义了滚动条的宽度,有两个值autothin。不好的是,我们不能像webkit语法那样定义一个特定的数字。

.section {
  scrollbar-width: thin;
}

Scrollbar Color

有了这个属性,我们可以使用滚动条 trackthumb定义成对值的颜色。

.section {
    scrollbar-color: #6969dd #e0e0e0;
    scrollbar-width: thin;
}

虽然这种新语法很简单,但它是有限的。我们只能添加颜色。我们不能添加它。shadows`、gradientsrounded,或者任何类似的东西,我们只允许定制颜色。

指定自定义滚动条的范围

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

使用旧语法,我们可以编写选择器,而不是附加到元素上,它们将应用于所有可滚动元素。

::-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);
}

对于新的语法,它几乎是一样的。我注意到的是,如果你想要一种通用的风格,它应该应用于它

前端开发-adminJS.cn

声明:本文仅供个人学习使用,来源于互联网,本文有改动,本文遵循[BY-NC-SA]协议, 如有侵犯您的权益,请联系本站,本站将在第一时间删除。谢谢你

原文地址:css如何设置滚动条样式(css怎么设置滚动条样式)