Question

我的网站上有一个水平滚动部分，但我想更改滚动样式，可以使用'''::-webkit-scrollbar'''标签来更改滚动条样式，但这也会影响垂直滚动。我只想在滚动条水平滑动内容时更改滚动条。

任何回复都将不胜感激。

Answer 1

使用伪类选择器：

:horizontal
:vertical
:decrement
:increment
:start
:end 
:double-button
:single-button
:no-button
:corner-present
:window-inactive

正在运行的演示：Codepen。

更多信息here。

注意：这仅适用于webkit浏览器。

Answer 2

您可以将::webkit-scrollbar用于特定的类。例如：让容器为“ .scroll-content”

.scroll-content::-webkit-scrollbar-track{-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1);box-shadow: inset 0 0 6px rgba(0,0,0,0.1);background-color: #ccc;}
.scroll-content::-webkit-scrollbar{width: 5px;height: 5px;background-color: #ccc;}
.scroll-content::-webkit-scrollbar-thumb{background-color: #ff7043;}

但是此方法不适用于Mozilla Firefox

仅在水平时更改滚动条样式

2 个答案: