CSS隐藏滚动条,但元素可滚动

Question

我有这个名为items的元素,元素内的元素长度超过元素高度,我想让它可滚动但隐藏滚动条,我该怎么做？

<div class="left-side">
    <div class="items" style="display:block;width: 94%;margin: 0 auto;overflow: hidden;">
    </div>
</div>

.left-side {
    width: 1470px;
    padding-top: 20px;
    height: 878px;
}

我尝试将左侧类溢出设置为auto,但是没有做任何事情.

Answer 1

你可以隐藏它:

html {
  overflow:   scroll;
}
::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* make scrollbar transparent */
}

有关详细信息,请参阅:隐藏滚动条,但仍可以滚动

Answer 2

我在SO中将几个不同的答案组合到以下代码段中，这些代码应该可以在所有（即使不是大多数）现代浏览器上运行。您所要做的就是将CSS类添加.disable-scrollbars到要应用此元素的元素上。

.disable-scrollbars::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* Chrome/Safari/Webkit */
}

.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
}

如果您想使用SCSS / SASS：

.disable-scrollbars {
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE 10+ */
  &::-webkit-scrollbar {
    width: 0px;
    background: transparent; /* Chrome/Safari/Webkit */
  }
}

Answer 3

希望这可以帮助

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

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

Answer 4

类似于 Kiloumap L'artélon 的回答，

::-webkit-scrollbar {
    display:none;
}

也能用

Answer 5

如果您真的想摆脱滚动条,请将信息分成两个单独的页面.

滚动条的可用性指南由Jakob Nielsen撰写:

滚动和滚动条有五个基本的可用性指南:

• 如果某个区域有滚动内容,请提供滚动条.不要依赖于人们可能不会注意到的自动滚动或拖动.
• 如果所有内容都可见,请隐藏滚动条.如果人们看到滚动条,他们会认为有额外的内容,如果他们无法滚动则会感到沮丧.
• 遵守GUI标准并使用看起来像滚动条的滚动条.
• 避免在网页上水平滚动并在其他地方将其最小化.
• 显示所有重要信息.用户通常根据他们可以看到的内容决定是留下还是离开而不滚动.此外,他们只将20%的注意力放在首位.

要使滚动条仅在需要时可见(即当有内容向下滚动时),请使用overflow: auto.