如何使用CSS在网页上实现自定义滚动条

CSS是我们用来改善应用中的网页外观的语言。通过W3C目前的CSS滚动条规范，我们现在可以用CSS来定制滚动条的外观。

在本教程中，我们将学习如何建立一个网页并使用CSS在现代浏览器上定制滚动条。

前提条件

要编写代码，你需要在系统中安装一个代码编辑器，最好是[VS Code]。
要查看网页，你将需要一个网络浏览器，[如谷歌浏览器]。
我们需要对[HTML]和[CSS]有基本的了解。

目标

在本教程结束时，你将。

理解浏览器的滚动条和各种可供定制的CSS属性。
了解CSS伪元素的介绍。我们将主要关注::-webkit-scrollbar 伪元素。
能够使用CSS在你的网页上实现一个自定义的滚动条。
理解我们如何针对这一规范提供更多的浏览器支持。

浏览器滚动条的CSS属性

CSS支持各种属性，使我们能够控制应用滚动条的外观。

以下是可用于定制滚动条的选择器，包括。

::-webkit-scrollbar ，将代表整个滚动条。
::-webkit-scrollbar-button 是滚动条上的按钮。向上和向下的箭头。
::-webkit-scrollbar-thumb 是一个可拖动的手柄，用于进行滚动。
::-webkit-scrollbar-track 是轨道或进度条。
::-webkit-scrollbar-track-piece 代表滚动时不会被手柄覆盖的轨道。
::-webkit-scrollbar-corner 是滚动条的底角，这里是水平和垂直滚动条的交汇点。
::-webkit-resizer 是可拖动调整大小的手柄，它将出现在元素的底角。

这些都是-webkit厂商前缀中的常见属性。存在各种jQuery插件，将扩展或聚填这个功能到其他传统的浏览器。一个常用的插件是jScrollPane。

瞄准更多的浏览器支持

要建立自定义的滚动条样式，一个很好的做法是瞄准更多的对该功能的支持。这时，我们需要编写CSS代码，以支持W3C的-webkit-scrollbar 和CSS Scrollbars规范为目标。

这是一个使用滚动条属性的例子，即scrollbar-width 、scrollbar-color 、::-webkit-scrollbar 、::-webkit-scrollbar-track 和::webkit-scrollbar-thumb 。

/* This will work on Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: blue orange;
}

/* Targtes on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  width: 12px;
}

*::-webkit-scrollbar-track {
  background: orange;
}

*::-webkit-scrollbar-thumb {
  background-color: blue;
  border-radius: 20px;
  border: 3px solid orange;
}

题外话：WebKit浏览器会忽略一些不被认可的规则，并进行回退，以应用-webkit-scrollbar 规则。例如，Firefox浏览器会忽略他们不认识的规则，而使用CSS Scrollbars规范。

构建一个网页并实现自定义滚动条

在本节中，我们将建立一个登陆页面，并实现CSS代码来定制滚动条。让我们为我们的项目创建一个文件夹，名为landing-page 。

在这个文件夹中，我们将创建另一个文件夹，并将其命名为images ，其中将包含一个用于展示部分的图片。在我们的landing-page 的根部，我们有两个文件，index.html和styles.css 。

让我们按以下步骤设计这个应用程序。

为我们的HTML文件编写网页结构的代码。
为应用程序的布局设计和滚动条的定制添加CSS样式表。

HTML文件

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coding Websited</title>
    <link rel="stylesheet" href="design.css">
</head>
<body>
    <nav>
        <h1>CODING COMMUNITY</h1>
        <input type="search" name="search" id="search" placeholder="Search bar" />
        <div class="links">
            <button>
                <a href="#">Login</a>
            </button>
            <button>
                <a href="#">Register</a>
            </button>
            <button>
                <a href="#">About</a>
            </button>
        </div>
    </nav>
    <main>
        <img src="./images/gh.jpg" alt="">
    </main>

    <h1>Technologies Covered</h1>
    <section class="grid-container">

        <div>
            <img src="./images/download.png" alt="">
            This is the de-facto language for web development.
            JavaScript is a multi-paradigm language. Most popular Frameworks include React, Vue, Angular and Svelte.
            On the backend, the Node.js JavaScript runtime alongside the Express framework is the most popular.
        </div>
        <div>
            <img src="./images/1200px-Python-logo-notext.svg.png" alt="">
            Python is popular and powerful general purpose programming. From every stack
            web development, machine learning, data science, python growth is constant.

        </div>
        <div>
            <img src="./images/kotlin_250x250.png" alt="">
            The new Android king is a growing language in the JVM ecosystem. Kotlin was developed by JetBrains and was meant to be interoperable with Java. Nowadays, the support for backend development is rising.
        </div>
    </section>

    <footer>
        &copy; 2020. All rights reserved.
    </footer>
</body>
</html>

代码演练。

链接标签<link rel="stylesheet" href="design.css"> 是指向我们的外部样式表，名为design.css 。它与HTML文件在同一根路径下。
导航条将包含h1 ，一个搜索输入和按钮。
主要是展示有一个来自我们的图像文件夹的图像。所有使用的图片都应该在这个文件夹中。
<section> ，有一个类container ，有三个<div> 标签，使用flexbox显示。每个div是一个卡片，有一张图片和一个描述。

将CSS添加到我们的应用程序中

为了改善HTML的外观，我们将使用CSS样式表。

我们的网页样式的全部代码。

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
    font-family: monospace,sans-serif;
    background-repeat: no-repeat;
    position: relative;
    max-width: 100vw;
    max-height: 100vh;
}
img{
    width: 100%;
}
::-webkit-scrollbar{
    width: 10px;
}
::-webkit-scrollbar-track{
    background-color: rgb(0, 0, 0);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb{
    background: linear-gradient(transparent, #30ff00);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover{
    background: linear-gradient(transparent, #00c6ff);
}
main{
    background-attachment: fixed;
}
button{
    background-color: rgb(26, 85, 248);
    border:none;
    padding: 6px 8px;
}
nav{
    position: sticky;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(24, 24, 24);
    color: white;
    padding: 1.4rem;
}
nav h1{
    color: coral;
    font-size: 2.5rem;
}
nav input{
    padding: 0.8rem 5rem;
}
nav input::placeholder{
    font-size: 1rem;
    color:rgb(26, 85, 248);
}

a{
    color: white;
    padding: 5px;
    font-size: 1rem;
    text-decoration: none;
}
h1{
    text-align: center;
}
.container{
    display: flex;
}
.container img{
    width: 100px;
    height: 100px;
}
.container div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}
footer{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(24, 24, 24);
    color: white;
    padding: 1.4rem;
}

的CSS代码。

<main> 标签中的图像是我们的展示柜，宽度为100%。这使得它占据了整个视口的宽度。
导航条的样式是使用flexbox的。display: flex 属性将使它成为一个flexbox（柔性容器）。默认情况下，它将被水平显示。为了在中间添加空间，使用了justify-content: space-between 。
为了给容器元素设置样式，我们使用CSS flexbox来水平显示元素。
对于我们的滚动条，我们将使用-webkit 卖方前缀。这个功能利用了CSS的伪元素。一个CSS伪元素是一个添加到选择器中的关键字，它可以让你对所选元素的特定部分进行样式设计。

最终应用

当处于悬停状态时，滚动条的背景颜色将是linear-gradient(transparent, #00c6ff); 。

the application on hover

the application photo

这就是我们实现滚动条功能的最终应用。Mozilla的文档是一个很好的资源，可以参考和检查当前浏览器的支持情况。

你可以在netlify上查看实时应用程序。

总结

CSS是任何前端开发者的基本语言，因为它是核心造型语言之一。这种语言是最容易上手的语言之一，但也是最难掌握的语言之一。

本文涉及的主题是如何通过建立一个简单而实用的网页来使用CSS来设计滚动条，从而转化为一个更好看的用户界面。

如何使用CSS在网页上实现一个自定义的滚动条