隐藏浏览器上的垂直滚动条但使其仍然有效

Posted 2023-03-06

【中文标题】隐藏浏览器上的垂直滚动条但使其仍然有效

【英文标题】：Hide vertical scrollbar on browsers but making it still working

【发布时间】：2021-11-17 12:42:26

【问题描述】：

我必须隐藏元素的垂直滚动条，但我必须让“滚动”继续工作，例如使用鼠标滚轮。

我关注了这个post：

.container 
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */

.container::-webkit-scrollbar  /* WebKit */
    width: 0;
    height: 0;

使用该代码，我可以隐藏两个滚动条，但无法保持水平滚动条可见。 有人知道怎么做吗？

【参考方案1】：

您想显示水平滚动条并隐藏垂直滚动条但同时使两者都工作吗？如果有，可以参考下面的代码：

.content 
  width: 400px;
  height: 200px;


.container 
  overflow-x: auto;
  overflow-y: auto;
  height: 100px;
  width: 200px;
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* Internet Explorer 10+ */


.container::-webkit-scrollbar 
  height: 8px;
  width: 0px;
  border: 1px solid #fff;


 ::-webkit-scrollbar-track 
  border-radius: 0;
  background: #eeeeee;


 ::-webkit-scrollbar-thumb 
  border-radius: 0;
  background: #b0b0b0;

<div class="container">
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>
</div>

此代码适用于 webkit 浏览器。但是对于 FireFox 和 IE，我们似乎只能隐藏或显示两个滚动条，因为它们无法自定义滚动条轨道和滚动条拇指。

【讨论】：

谢谢你 :)