如何隐藏水平滚动条并保持垂直滚动条可见，同时仍然能够水平滚动？

Posted 2023-03-04

【中文标题】如何隐藏水平滚动条并保持垂直滚动条可见，同时仍然能够水平滚动？

【英文标题】：How do I hide horizontal scroll bar and keep vertical scroll bar visible while still being able to scroll horizontally?

【发布时间】：2022-01-01 22:57:04

【问题描述】：

有很多这样的问题，但我一直无法找到一个回答如何只删除水平滚动条同时仍然能够水平滚动的问题：

我使用了以下代码，但它同时删除了水平和垂直滚动条：

.section 
  overflow-y: auto;
  scrollbar-width: none; /*For firefox*/


::-webkit-scrollbar 
  display: none; /*For remainder of the browsers*/
 

【问题讨论】：

display: none 显然会影响两个滚动条。 （而不是设置宽度我会尝试设置水平滚动条的高度）有各种选择器，也许this article有帮助

@SecretTimes 不，它没有说明保持垂直滚动条可见

【参考方案1】：

试试这个：

.section 
  overflow-x: scroll;
  scrollbar-width: none;
  overflow-y: auto;


.section::-webkit-scrollbar 
  display: none;