如何隐藏WebKit垂直滚动条并显示水平滚动条？

没有::-webkit-y-scrollbar这种直接的伪元素语法，但可以通过WebKit滚动条的基础样式和方向伪类实现需求：

• 核心实现逻辑：把垂直滚动条的宽度设为0来隐藏它，同时保留水平滚动条的高度让它正常显示

::-webkit-scrollbar {
  width: 0; /* 垂直滚动条宽度设为0，直接隐藏 */
  height: 10px; /* 水平滚动条高度，可根据需求调整 */
}

• 如果需要给水平滚动条自定义样式（比如轨道、滑块），可以用:horizontal伪类单独针对水平方向的滚动条子元素设置：

/* 水平滚动条轨道样式 */
::-webkit-scrollbar-track:horizontal {
  background-color: #f1f1f1;
}

/* 水平滚动条滑块样式 */
::-webkit-scrollbar-thumb:horizontal {
  background-color: #888;
  border-radius: 5px;
}

/* 滑块hover状态 */
::-webkit-scrollbar-thumb:horizontal:hover {
  background-color: #555;
}

注意：这套方案仅支持WebKit内核的浏览器（Chrome、Safari、Edge等）。如果需要兼容Firefox等非WebKit浏览器，目前没有原生CSS方法能单独隐藏垂直滚动条，只能通过容器嵌套等布局技巧间接实现，复杂度会更高。

内容的提问来源于stack exchange，提问作者tcvd