CSS | ::-webkit-滚动条

::-webkit-scrollbar是 CSS 中的一个伪元素，用于修改浏览器滚动条的外观。
在我们开始了解它是如何工作的以及如何实现之前，我们需要了解有关该元素的一些事实。

• Chrome、Safari 和 Opera 等浏览器都支持此标准
• 像 firefox 这样的浏览器不支持这个

对于 webkit 浏览器，您可以使用以下伪元素来自定义浏览器的滚动条：

• ::-webkit-scrollbar : 滚动条
• ::-webkit-scrollbar-button : 滚动条上向上或向下的箭头
• ::-webkit-scrollbar-thumb : 可拖动的滚动手柄
• ::-webkit-scrollbar-track : 进度条
• ::-webkit-scrollbar-track-piece : 手柄未覆盖的区域
• ::-webkit-scrollbar-corner : 垂直滚动条和水平滚动条相交的滚动条底角
• ::-webkit-resizer ：出现在某些元素底角的可拖动调整大小手柄

以下示例采用每个元素并解释其正确用法(我还尝试为每个元素使用不同的颜色，以便可以单独突出显示每个标签的用途)：

  

    
    

  

    
        
GeeksforGeeks
        
CSS |::-webkit-scrollbar
        
HTML stands for Hyper Text Markup Language. 
          It is used to design web pages using markup language. 
          HTML is the combination of Hypertext and Markup language. 
          Hypertext defines the link between 
          the web pages. Markup language is used to 
          define the text document within tag which 
          defines the structure of web pages.
        

        
HTML is a markup language which is used by 
           the browser to manipulate text, images and 
          other content to display it in required format.
        

        
Cascading Style Sheets, fondly 
           referred to as CSS, is a simply
          designed language intended to simplify 
          the process of making web
          pages presentable. CSS allows you to 
           apply styles to web pages.
          More importantly, CSS enables you to 
          do this independent of the
          HTML that makes up each web page.
    

  

输出：

支持的浏览器： CSS支持的浏览器 | ::-webkit-scrollbar列出如下：

• 谷歌浏览器
• 苹果Safari
• 歌剧