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

Answer 1

您可以隐藏它：

html {
  overflow:   scroll;
}

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

有关更多信息，请参阅：隐藏滚动条，但仍然可以滚动

Answer 2

我将 SO 中的几个不同答案组合到以下片段中， 我相信它应该适用于所有（如果不是大多数）现代浏览器。所有的你 要做的就是将 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;
  }
}

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

适用于所有主要浏览器

html {
    overflow: scroll;
    overflow-x: hidden;
}
::-webkit-scrollbar {
    width: 0px;  /* Remove scrollbar space */
    background: transparent;  /* Optional: just make scrollbar invisible */
}

Answer 6

您可以使用类将其隐藏在特定的 div 上：

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

.hide-scroll{
    overflow: scroll;
}

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

Answer 7

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

Jakob Nielsen 的滚动条可用性指南：

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

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

要使滚动条仅在需要时可见（即，当有内容向下滚动时），请使用

overflow: auto

。

Answer 8

您可以使用 SlimScroll 插件使 div 可滚动，即使它设置为

overflow: hidden;

（即隐藏滚动条）。

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

希望这有帮助:)

Answer 9

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

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

Answer 10

只需将其添加到您的 CSS 中，工作就完成了...

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

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