如何隐藏垂直滚动条而不隐藏水平滚动条并且仍然能够滚动？

Question

我有一个需要水平和垂直滚动的网格。

我只想隐藏（不是禁用滚动功能）垂直滚动条。

经过测试的解决方案 1

/* Hide scrollbar for Chrome, Safari and Opera */
.k-grid-content::-webkit-scrollbar {
    display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.k-grid-content {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

此解决方案隐藏所有滚动条

经过测试的解决方案 2

overflow-y: hidden

此解决方案可防止滚动

我怎样才能只隐藏垂直滚动条而不失去滚动能力？ 有可能吗？

Answer 1

自定义滚动条是一个跨浏览器兼容性问题，因为Firefox 限制了您很多。

对于WebKit browsers，您可以在滚动条上设置width 和height！

::-webkit-scrollbar
{
  width: 0;
  height: 8px;
}

这会隐藏垂直滚动条，但保持水平滚动条。它还删除默认滚动条样式，因此需要更正。

::-webkit-scrollbar
{
  width: 0;
  height: 1.2rem;
}

::-webkit-scrollbar-track
{
  background: white;
}

::-webkit-scrollbar-thumb
{
  background: hsl(0, 0%, 60%);
}

body
{
  width: 1500px;
  height: 1000px;
  background: url('https://random.imagecdn.app/1920/1080');
}

Interactive Code

Answer 2

这是可能的。由于我们没有您的 HTML，这里有一些示例 HTML 以作为示例：

<div>
  <p>scroll down!</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>content</p>
  <p>scroll up!</p>
</div>

这是可以让您在没有滚动条的情况下也可以完成垂直滚动的 CSS（虽然我不知道这对可访问性的效果如何）：

/* hide scrollbar but allow scrolling */
div {
  -ms-overflow-style: none; /* for Internet Explorer, Edge */
  scrollbar-width: none; /* for Firefox */
  overflow-y: scroll; 
}

div::-webkit-scrollbar {
  display: none; /* for Chrome, Safari, and Opera */
}

/* other styling */
div {
  border: solid 5px black;
  border-radius: 5px;
  height: 300px;
  padding: 10px;
  width: 200px;
}

* {
  background-color: #EAF0F6;
  color: #2D3E50;
  font-family: 'Avenir';
  font-size: 26px;
  font-weight: bold;
}