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

Question

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

非常感谢任何回复。

Answer 1

您可以将 ::webkit-scrollbar 与特定的 class 一起使用。例如：让容器成为'.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

Answer 2

使用伪class 选择器：

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

工作演示：Codepen。

更多信息here。

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

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

Change scrollbar style only when horizontal

html

css

webkit

scrollbar

horizontal-scrolling