整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
定义滚动条现在越来越流行，很值得研究一翻。为什么需要自定义滚动？浏览器的默认的滚动条让UI在多个操作系统中看起来不一致，使用定义滚动我们可以统一风格。
我一直对如何在CSS中定制滚动条很感兴趣，但一直没有机会这样做。今天，我就记录一下自己的学习过程。
首先需要介绍一下滚动条的组成部分。滚动条包含 track 和 thumb，如下图所示：
track是滚动条的基础，其中的 thumb是用户拖动支页面或章节内的滚动。
还有一件重要的事情要记住，滚动条可以水平或垂直地工作，这取决于设计。另外，在一个多语言网站上工作时，这一点也会发生变化，该网站在从左到右（LTR）和从右到左（RTL）两个方向上工作。
拥有一个自定义的滚动条曾经是webkit的专利，所以Firefox和IE被排除在游戏之外。我们有一种新的语法，只在Firefox中使用，当它被完全支持时，将使我们的工作更容易。我们先看一下旧的Webkit语法，然后再介绍新的语法。
滚动条的宽度
首先，我们需要定义滚动条的大小。这可以是垂直滚动条的宽度，也可以是水平滚动条的高度。
.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中定制滚动条的老方法。让我们探索一下新的语法。
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);
}
对于新的语法，它几乎是一样的。我注意到的是，如果你想要一个通用的样式，它应该被应用于<html>元素，而不是<body>。
html {
scrollbar-color: #6969dd #e0e0e0;
scrollbar-width: thin;
}
我尝试为<body>添加上面的内容，但它没有像预期的那样工作。
现在我们知道了新旧语法的工作原理，接着，我们开始定制一些滚动条设计。
例1
在研究定制滚动条之前，值得讨论一下Mac OS中的默认样式。下面是它的外观。
对于Windows，它有点不同。
下面是我们根据上面的模拟图来定制滚动条。
.section::-webkit-scrollbar {
width: 16px;
}
.section::-webkit-scrollbar-track {
background-color: #e4e4e4;
border-radius: 100px;
}
.section::-webkit-scrollbar-thumb {
background-color: #d4aa70;
border-radius: 100px;
}
为 track 和thumb添加border-radius是必要的，因为它在::webkit-scrollbar上不起作用。
在新的语法中，我们不能调整滚动条的宽度，唯一能做的的是改变 track 和thumb的背景颜色。
.section {
scrollbar-color: #D4AA70 #e4e4e4;
}
例2
对于这个例子，设计有点重，因为它包含渐变和阴影。我们可以应用内部阴影和渐变来模仿这种效果。来看看怎么做!
.section::-webkit-scrollbar-thumb {
background-image: linear-gradient(180deg, #D0368A 0%, #708AD4 99%);
box-shadow: inset 2px 2px 5px 0 rgba(#fff, 0.5);
border-radius: 100px;
}
示例地址：https://codepen.io/shadeed/pen/VwpOReG
例3
我们还可以为 thumb 和track添加边框，这可以帮助我们处理一些棘手的设计。
.section::-webkit-scrollbar-thumb {
border-radius: 100px;
background: #8070D4;
border: 6px solid rgba(0,0,0,0.2);
}
基于同样的例子，我们可以重置顶部和底部边界为零，这样thumb获得一个有趣的效果。注意thumb顶部和底部的那些小元素。
示例地址：https://codepen.io/shadeed/pen/qBrGvOx
我们可以为新旧语法的滚动条thumb添加悬停效果。
/* 旧语法 */
.section::-webkit-scrollbar-thumb:hover {
background-color: #5749d2;
}
/* 新语法 */
.section {
scrollbar-color: #d4aa70 #e4e4e4;
transition: scrollbar-color 0.3s ease-out;
}
.section:hover {
scrollbar-color: #5749d2;
}
创建一个可滚动的元素是可以通过给overflow属性添加一个除visible以外的值。建议使用auto关键字，因为它只在内容超过其容器时才会显示滚动条。
.section {
overflow-y: auto;
}
在定制滚动条设计时，请记住在 thumb 和 track之间要有良好的对比，这样它就容易被用户注意。
考虑一下下面这个自定义滚动条的 "坏 "例子。
thumb 的颜色几乎看不出来。这对用户来说不是好事，因为如果他们习惯于通过thumb 滚动，这将增加他们的难度。
作者：ishadeed 译者：前端小智 来源：ishadeed
原文：https://ishadeed.com/article/custom-scrollbars-css/
在Firefox中单独设置滚动条样式，你可以使用@-moz-document规则。这个规则允许你为特定的浏览器或浏览器引擎应用样式。
下面是一个例子，演示如何在Firefox中隐藏滚动条：
@-moz-document url-prefix() {
/* 在这里添加只对Firefox生效的样式 */
body {
scrollbar-width: none;
}
}在上面的例子中，@-moz-document url-prefix()表示只有在URL以空字符串（即所有URL）为前缀的情况下，才会应用其中的样式。在body元素中，scrollbar-width: none;将隐藏滚动条。
请注意，这样的规则只在Firefox中生效，而在其他浏览器中会被忽略。确保在使用这样的规则时进行测试，以确保所需的效果在目标浏览器中按预期工作。
在CSS中，*（星号）和 body 分别选择不同的元素或元素集合。
* {
margin: 0;
padding: 0;
}上述代码会将页面中所有元素的内外边距设置为零。
body {
font-family: 'Arial', sans-serif;
background-color: #f0f0f0;
}上述代码会将文档主体部分的字体设置为 Arial，并将背景颜色设置为 #f0f0f0。
所以，* 是一个通用的选择器，匹配所有元素，而 body 是特定于文档主体的选择器，用于选择文档主体元素并应用样式。在某些情况下，你可能希望使用 body 选择器，以更有针对性地影响文档的主要内容区域。
在最新的 Firefox 版本中，-moz-scrollbar-thumb 伪类选择器已被弃用，取而代之的是使用更通用的 CSS Scrollbar 模块规范。为了在 Firefox 中优化滚动条并使其变细，你可以使用新的规范中的属性。
以下是一个简单的示例，可以使 Firefox 中的滚动条变细：
/* Firefox 滚动条样式 */
* {
scrollbar-width: thin;
scrollbar-color: #999999 #f0f0f0;
}
/* Webkit 滚动条样式（Chrome, Safari等）*/
*::-webkit-scrollbar {
width: 12px;
}
*::-webkit-scrollbar-thumb {
background-color: #999999;
}
*::-webkit-scrollbar-track {
background-color: #f0f0f0;
}上述样式包含两部分：
请注意，滚动条样式在不同浏览器中可能会有所不同，因此上述样式在 Firefox 中有效，而 Webkit 样式在 Chrome 和 Safari 中有效。在实际使用中，你可能需要根据需要进行调整和测试，以确保在不同浏览器中都能达到预期的效果。
网页设计中，自定义浏览器滚动条是提升用户体验和美化界面的一项重要技巧。通过CSS的伪元素和属性，我们能够轻松地调整滚动条的样式。以下是一些简单的步骤，教你如何设置浏览器滚动条。
首先，我们使用::-webkit-scrollbar伪元素来选择Webkit内核浏览器（如Chrome、Safari）的滚动条。接着，我们通过width属性调整滚动条的宽度，使其更符合设计需求。这一步骤非常关键，因为宽度的调整可以在一定程度上影响用户的感知和交互。
/* 设置滚动条的宽度 */
::-webkit-scrollbar {
width: 5px;
}其次，使用::-webkit-scrollbar-track选择滚动条的轨道部分，通过background属性为轨道设置背景颜色。这有助于使滚动条在页面中更加协调和统一。
/* 滚动条轨道的样式 */
::-webkit-scrollbar-track {
background: #f1f1f1;
}接下来，使用::-webkit-scrollbar-thumb选择滚动条的拖动手柄部分，通过background属性设置手柄的背景颜色。这一步可以为滚动条增添一些独特的个性，使其与整体设计风格更加契合。
/* 滚动条手柄的样式 */
::-webkit-scrollbar-thumb {
background: #bec4c4;
}最后，通过::-webkit-scrollbar-thumb:hover选择手柄在悬停状态时的样式，通过调整background属性，为用户提供视觉反馈，增强交互体验。
::-webkit-scrollbar-thumb:hover {
background: #555;
}通过以上步骤，你可以轻松定制出一个独特且符合网站设计的浏览器滚动条。这种个性化的设计不仅能够提升用户对网站的印象，还能够改善用户在页面上的滚动体验。在实际应用中，根据网站的整体风格和需求，你还可以进一步调整滚动条的其他样式属性，以实现更加复杂和丰富的效果。
*请认真填写需求信息，我们会在24小时内与您取得联系。
