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;
}

如何在不隐藏水平滚动条的情况下隐藏垂直滚动条并且仍然能够滚动？

2 个答案: