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

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

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

我尝试将左侧类溢出设置为 auto，但是没有用 什么都行。

236564 次浏览
小开
最佳答案

你可以把它藏起来:

html {
overflow:   scroll;
}


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

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

小开

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

滚动条的可用性指南作者: Jakob Nielsen:

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

  • 提供一个滚动条，如果一个区域有滚动内容。不要依赖 自动滚动或拖动，人们可能不会注意到。
  • 如果所有内容都可见，则为滚动条 假设有额外的内容，如果不能，他们会感到沮丧 卷轴。
  • 遵守 GUI 标准并使用看起来像 滚动条。
  • 避免在 Web 页面上进行水平滚动，并将其最小化 其他地方。
  • 在折叠上方显示所有重要信息。用户 经常根据他们所看到的来决定是留下还是离开 而且他们只分配了20% 的注意力 在褶皱下面。

要使滚动条只在需要时才可见(例如，当有内容要向下滚动时) ，可以使用 overflow: auto。

小开

您可以使用 超薄卷轴插件使 div 可滚动，即使它被设置为 overflow: hidden;(即隐藏滚动条)。

您也可以控制触摸滚动以及滚动速度使用这个插件。

希望这对你有帮助:)

小开

与基鲁马普 · 阿特隆的回答相似,

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

也有用

小开

如果你敢顶嘴，你可以试试这个

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

我将 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;
}
}
小开

可以在所有主流浏览器上工作

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

希望这个能帮上忙

/* 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 */
}
小开

您可以将其隐藏在特定的 div using 类中:

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

.hide-scroll{
overflow: scroll;
}


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

提交答案