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

Posted 2023-02-21

【中文标题】CSS隐藏滚动条，但元素可滚动

【英文标题】：CSS hide scroll bar, but have element scrollable

【发布时间】：2017-08-28 09:38:04

【问题描述】：

我有一个名为 items 的元素，元素内的内容更长 比元素高度，我想让它可滚动但隐藏滚动条， 我该怎么做？

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

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

我尝试将左侧类溢出设置为自动，但没有这样做 任何东西。

【问题讨论】：

Hiding the scrollbar on an html page的可能重复

"[..]我想让它可滚动但隐藏滚动条"——那太可怕了！滚动条是有目的的，目的就是滚动。

Hide scroll bar, but still being able to scroll的可能重复

是的，@Abhitalks 是正确的：这会破坏页面的可用性。如果不需要，请隐藏滚动条；如果首屏下方有更多内容，请不要隐藏它。 nngroup.com/articles/scrolling-and-scrollbars

【参考方案1】：

你可以隐藏它：

html 
  overflow:   scroll;

::-webkit-scrollbar 
    width: 0px;
    background: transparent; /* make scrollbar transparent */

欲了解更多信息，请参阅：Hide scroll bar, but while still being able to scroll

【讨论】：

你可以隐藏它，但它的可用性会很差。

即使在提供的链接中，它也指出这在 FF 或 IE 中不起作用

这仅适用于桌面 chrome。它不适用于我测试过的任何其他浏览器。

为什么需要background: transparent;？ width: 0 还不够吗？

对于水平滚动条，这很明显，但我们设置了height: 0;

【参考方案2】：

我将 SO 中的几个不同答案组合到以下 sn-p 中， 我相信它应该适用于所有（如果不是大多数）现代浏览器。所有你 要做的就是将 CSS 类 .disable-scrollbars 添加到你想要的元素上 将其应用于。

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

    
.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 
    background: transparent; /* Chrome/Safari/Webkit */
    width: 0px;
  

【讨论】：

将此规则应用于所有孩子，.disable-scrollbars * 和 .disable-scrollbars *::-webkit-scrollbar

【参考方案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 */

【参考方案4】：

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

::-webkit-scrollbar 
    display:none;

也可以

【讨论】：

这仅适用于桌面 chrome。它不适用于我测试过的任何其他浏览器。

width: 0; 似乎隐藏了水平滚动条，但在 Chrome 桌面 83 上留下了一个奇怪的空白。display: none; 没有这个问题。为了安全起见，我把两个都扔了。

【参考方案5】：

适用于所有主流浏览器

html 
    overflow: scroll;
    overflow-x: hidden;

::-webkit-scrollbar 
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */

【参考方案6】：

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

Usability guidelines on scrollbars by Jakob Nielsen:

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

如果区域有滚动内容，则提供滚动条。不要依赖 自动滚动或拖动，人们可能不会注意到。 隐藏 如果所有内容都可见，则滚动条。如果人们看到滚动条，他们 假设有额外的内容，如果他们不能，就会感到沮丧 滚动。 遵守 GUI 标准并使用看起来像 滚动条。 避免网页上的水平滚动并将其最小化 别处。 在首屏显示所有重要信息。用户 经常根据他们所看到的来决定是留下还是离开 无需滚动。此外，他们只分配 20% 的注意力 首屏。

要使您的滚动条仅在需要时可见（即当有内容可以向下滚动时），请使用overflow: auto。

【讨论】：

这很好，也很明智，但有时你真的想要在没有上下文的情况下做一些听起来很奇怪的事情。例如，如果您有一个带有一个或多个拆分器的复杂表格组件，并且这些部分是滚动同步的，那么您只需要一个部分上的滚动条，因为对于用户来说很明显整个事物可以作为一个单元和单独的滚动条滚动只会增加混乱。

这并不能真正回答问题

你有效地告诉 OP 他试图做的事情是错误的。在某些情况下它是正确的（轮播是最常见的）。在轮播的情况下，还有一些其他 UI 元素指示拖动功能（应用程序呈现的箭头和/或位置点）。

到目前为止，这个答案有 7 个赞成票和 5 个反对票。似乎意见分歧。如果它被所有人否决了，我会删除它，但既然不是，我就不要了。

【参考方案7】：

如果你使用sass，你可以试试这个

&::-webkit-scrollbar  

【参考方案8】：

即使设置为overflow: hidden;（即隐藏滚动条），您也可以使用SlimScroll 插件使div 可滚动。

您还可以使用此插件控制触摸滚动以及滚动速度。

希望这会有所帮助:)

【讨论】：

这个插件甚至不能在它自己的演示页面上运行，所以它不太可能是一个好的解决方案......

【参考方案9】：

您可以将其隐藏在特定的 div usig 类中：

<div class="hide-scroll"></div>

.hide-scroll
    overflow: scroll;


.hide-scroll::-webkit-scrollbar 
    background: transparent; /* make scrollbar transparent */
    width: 0px;