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

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

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

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

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

简介

首先，我们需要介绍滚动条的组成部分。滚动条包括滚动条。 track 和 thumb，下图如下：

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

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

自定义滚动条设计

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

1、旧的语法

滚动条的宽度

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

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

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

滚动条 track

这代表了滚动条的基础。通过添加，我们可以添加它。background、shadows、border-radius和border对其进行造型。

.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

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

.section {
  scrollbar-width: thin;
}

Scrollbar Color

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

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

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

指定自定义滚动条的范围

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

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

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

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