css自定义滚动条_使用CSS自定义浏览器的滚动条

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:

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

注意 ( Note )

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

术语 ( Terminologies )

-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!