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

【问题标题】：Change scrollbar style only when horizontal仅在水平时更改滚动条样式
【发布时间】：2020-06-22 12:31:39
【问题描述】：

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

非常感谢任何回复。

【问题讨论】：

有更多可用的选择器。看这里：developer.mozilla.org/en-US/docs/Web/CSS/::-webkit-scrollbar

标签： html css webkit scrollbar horizontal-scrolling

【解决方案1】：

使用伪类选择器：

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

工作演示：Codepen.

更多信息here。

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

【讨论】：

【解决方案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

【讨论】：