滚轮条样式

::-webkit-scrollbar

::-webkit-scrollbar CSS 伪类元素会影响设置了 overflow:scroll; 的元素的滚动条样式。

备注： 如果没有设置 overflow:scroll;，元素的滚动条将不会显示。

备注： ::-webkit-scrollbar 仅在基于 Blink 或 WebKit 的浏览器（例如，Chrome、Edge、Opera、Safari、iOS 上所有的浏览器，以及其它基于 WebKit 的浏览器）上可用。滚动条样式的标准方法可用于 scrollbar-color 和 scrollbar-width。

滚轮条样式

你可以使用以下伪元素选择器去修改基于 webkit 的浏览器的滚动条样式：

• ::-webkit-scrollbar——整个滚动条。
• ::-webkit-scrollbar-button——滚动条上的按钮（上下箭头）。
• ::-webkit-scrollbar-thumb——滚动条上的滚动滑块。
• ::-webkit-scrollbar-track——滚动条轨道。
• ::-webkit-scrollbar-track-piece——滚动条没有滑块的轨道部分。
• ::-webkit-scrollbar-corner——当同时有垂直滚动条和水平滚动条时交汇的部分。通常是浏览器窗口的右下角。
• ::-webkit-resizer——出现在某些元素底角的可拖动调整大小的滑块

示例

cssH

.q,.w,.e{
        display: block;
        width: 10em;
        overflow: auto;
        height: 2em;
    }
    .w::-webkit-scrollbar{
        display: none;
    }
    .e::-webkit-scrollbar{
        width: 5px;
        height: 8px;
        background-color: #aaa;
    }

HTML

<div class="q">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Dicta maiores incidunt culpa quisquam obcaecati
        officiis recusandae asperiores molestias. Possimus, error accusantium! Corporis aliquam iure dolorum cupiditate,
        tenetur omnis explicabo fugit?
        Sed quos accusantium sint aperiam quis consequuntur ullam officia ut, magni maiores magnam, nobis amet sit
        consequatur non quae! Ullam doloribus ex modi laboriosam. Repellendus quisquam consequatur modi deserunt
        ducimus!
    </div>
    <div class="w">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sequi debitis autem in animi est vero cum quibusdam
        accusantium nihil eum non officia, tenetur modi commodi eius. Quo ducimus commodi accusamus.
    </div>
    <div class="e"> 
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolores id beatae unde magni quasi dolore numquam, delectus sequi similique quas corporis vitae in et accusantium fugit repellendus eveniet est esse?
    </div>

结果