css自定义滚动条

Custom scrollbars are getting popular, and you might have come across websites that have unique scrollbars, making the sites feel and look different. There are basically a few ways to implement a custom scrollbar. In this tutorial we will be using CSS3, which is the most straightforward way. However, there are jQuery plugins that can help with customizing scrollbar, but I do not like to add more JavaScript to my website. If you are a designer, photographer or you just want your website to have a cool scrollbar, go ahead with the jQuery plugins.

自定义滚动条变得越来越流行，您可能会遇到具有独特滚动条的网站，使这些网站的感觉和外观有所不同。 基本上有几种方法可以实现自定义滚动条。 在本教程中，我们将使用CSS3，这是最简单的方法。 但是，有些jQuery插件可以帮助自定义滚动条，但是我不喜欢在我的网站上添加更多JavaScript。 如果您是设计师，摄影师，或者您只是想让您的网站具有漂亮的滚动条，请继续使用jQuery插件。

Note: You should know custom scrollbars are exposed behind the -webkit vendor prefix for use in browsers using the Webkit (and Blink) rendering engine.

注意 ：应该知道，自定义滚动条位于-webkit供应商前缀后面，供在使用Webkit（和Blink）呈现引擎的浏览器中使用。

Before we start, let's look at a basic scrollbar structure:

在开始之前，让我们看一下基本的滚动条结构：

( )

1. Important words are highlighted.
   Important words突出显示。
2. Bold words emphasis a point.
   粗体字强调一点。
3. Previous / Next code appears like this . . . .
   上一个/下一个代码显示如下. . . . . . 。

( )

-webkit-scrollbar consists of seven different pseudo-elements, and together comprise a full scrollbar UI element:

-webkit-scrollbar由七个不同的伪元素组成，并且一起构成完整的滚动条UI元素：

1. ::-webkit-scrollbar the background of the bar itself.
   ::-webkit-scrollbar栏本身的背景。
2. ::-webkit-scrollbar-button the directional buttons on the scrollbar.
   ::-webkit-scrollbar-button的方向按钮。
3. ::-webkit-scrollbar-track the empty space “below” the progress bar.
   ::-webkit-scrollbar-track进度栏“下方”的空白区域。
4. ::-webkit-scrollbar-track-piece the top-most layer of the the progress bar not covered by the thumb.
   ::-webkit-scrollbar-track-piece进度条的最上层未被拇指覆盖。
5. ::-webkit-scrollbar-thumb the draggable scrolling element resizes depending on the size of the scrollable element.
   ::-webkit-scrollbar-thumb ，可拖动滚动元素的大小取决于可滚动元素的大小。
6. ::-webkit-scrollbar-corner the bottom corner of the scrollable element, where two scrollbar meet.
   ::-webkit-scrollbar-corner可滚动元素的底角，两个滚动条在此相交。
7. ::-webkit-resizer the draggable resizing handle that appears above the scrollbar-corner at the bottom corner of some elements.
   ::-webkit-resizer可拖动的调整大小手柄，出现在某些元素底角的滚动条拐角上方。

Now that you are familiar with the terminologies, let's start!

现在您已经熟悉了术语，让我们开始吧！

( )

First, create index.html and style.css files, and open the current directory with Sublime Text (or Atom, VIM, WebStorm).

首先，创建index.html和style.css文件，并使用Sublime Text （或Atom ， VIM ， WebStorm ）打开当前目录。

Note: If you're on Windows, read to run the commands below.

注意：如果您使用的是Windows，请阅读“ 以运行以下命令。

$touch index.html$ touch style.css$ open . -a 'Sublime Text'

创建HTML文档（index.html） (Create HTML Document (index.html))

You'll need to include the style.css file in the HTML file. You can type out the above HTML code or just copy and paste into your HTML file. :)

您需要在HTML文件中包含style.css文件。 您可以输入上面HTML代码，也可以复制并粘贴到HTML文件中。 :)

CSS样式表（style.css） (CSS Stylesheet (style.css))

Firstly, we set the .scrollbar (class) width, height, background-color, then set overflow-y: scroll to get the vertical scrollbar. We set min-height: 450px to the .force-overflow div so that the scrollbar appears (because we used the overflow-y property to scroll in .scrollbar class).

首先，我们设置.scrollbar （类）的width, height, background-color ，然后设置overflow-y: scroll以获取垂直滚动条。 我们将min-height: 450px设置为.force-overflow div，以便滚动条出现（因为我们使用了overflow-y属性在.scrollbar类中滚动）。

.scrollbar {
         background-color: #F5F5F5;    float: left;    height: 300px;    margin-bottom: 25px;    margin-left: 22px;    margin-top: 40px;    width: 65px;    overflow-y: scroll;}.force-overflow {
         min-height: 450px;}

Now, we use the scrollbar pseudo-element for creating our custom scrollbar. It will replace its default width with a new width of 6px and then add background-color: #F5F5F5.

现在，我们使用滚动条伪元素来创建自定义滚动条。 它将使用新的6px宽度替换其默认宽度，然后添加background-color: #F5F5F5 。

. . .#style-1::-webkit-scrollbar {
         width: 6px;    background-color: #F5F5F5;} . . .

Since we know that scrollbar contains track, button and thumb, we are now going to give a stylish look to thumb. We use pseudo-element (i.e. ::-webkit-scrollbar-thumb) with webkit prefix and set scrollbar-thumb background- color.

由于我们知道滚动条包含track ， button和thumb ，因此现在我们将为拇指赋予时尚外观。 我们使用带有webkit前缀的伪元素（即:::-webkit-scrollbar-thumb）并设置scrollbar-thumb background- color 。

. . .#style-1::-webkit-scrollbar-thumb {
         background-color: #000000;}. . .

After that, the scrollbar looks like this:

之后，滚动条如下所示：

We use box-shadow on scrollbar-track to make it stylish and add contrast between the scrollbar and scrollbar-track.

我们在scrollbar-track上使用box-shadow使其时尚，并在滚动条和滚动条轨道之间增加对比度。

. . .#style-1::-webkit-scrollbar-track {
         -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);    background-color: #F5F5F5;}

( )

A recap of what we discussed:

我们讨论的内容回顾：

• Customized scrollbars aren’t uncommon anymore. You will find them in major websites and blogs, especially personal portfolio websites.
  自定义滚动条已不再常见。 您会在主要网站和博客中找到它们，尤其是个人投资组合网站。
• There are tons of jQuery plugins that can help with customizing scrollbar.
  有大量的jQuery插件可以帮助自定义滚动条。
• Custom scrollbars are exposed behind the -webkit vendor prefix.
  自定义滚动条显示在-webkit供应商前缀后面。
• Basic structure of a scrollbar.
  滚动条的基本结构。
• Terminologies associated with scrollbars.
  与滚动条相关的术语。

The CSS way of customizing scrollbars is simple, but looks a bit rough. However, operating systems like Windows, OS X and Linux have their own style for the scrollbar. This in return could lead to undesirable results and inconsistencies for your design. Remember, you should keep it simple, stupid (KISS), not too fancy.

定制滚动条CSS方法很简单，但是看起来有些粗糙。 但是，诸如Windows，OS X和Linux之类的操作系统具有自己的滚动条样式。 反过来，这可能会导致不良结果和设计不一致。 请记住，您应该保持简单，愚蠢（KISS），而不是太花哨。

I have created more scrollbars using the above procedure. I made use of codePen for the demo, and you can find the full code for this tutorial on .

我使用上述过程创建了更多滚动条。 我在演示中使用了codePen，您可以在上找到本教程的完整代码。

That's all. I hope you like it!

就这样。 我希望你喜欢它！

Make sure to leave any thoughts, questions or concerns in the comments below. I would love to see them.

确保在下面的评论中留下任何想法，问题或疑虑。 我很想看到他们。

( )

翻译自:

css自定义滚动条