时间戳

首页 > 解决方案 > Hide vertical scrollbar on browsers but making it still working

css - Hide vertical scrollbar on browsers but making it still working

问题描述

I have to hide the vertical scrollbar of an element but I have to make the "scrolling" keep working, for example using the mouse wheel.

I Followed this post:

.container {
    overflow-y: scroll;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
}
.container::-webkit-scrollbar { /* WebKit */
    width: 0;
    height: 0;
}

With that code, I was able to hide both scrollbars, but I'm not able to keep the horizontal one visible. Does anyone know how to do it.?

标签： cssgoogle-chromeinternet-explorerfirefoxscrollbar

解决方案

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

.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，我们似乎只能隐藏或显示两个滚动条，因为它们无法自定义滚动条轨道和滚动条拇指。

推荐阅读