如何使滚动条不可见[重复]

Posted 2023-02-22

【中文标题】如何使滚动条不可见[重复]

【英文标题】：How to make scrollbar invisible [duplicate]

【发布时间】：2022-01-09 02:32:36

【问题描述】：

我正在制作一个网站，我认为导航栏在较小的设备中会导致太大。我发现了如何使它可滚动，但我不喜欢它旁边显示一个新的滚动条的事实。我怎样才能让它不可见？

【问题讨论】：

滚动条是一个重要的可访问性控件。在触摸输入设备上，滚动条不应该是持久的（例如，在 ios/android 上，它在不使用时会消失）。在桌面上，它的存在由操作系统设置控制。如果用户没有触摸输入，只有没有滚轮的鼠标怎么办？他们将如何移动视图？请考虑以更微妙的方式对其进行样式设置。

@jsejcksn 感谢您的反馈，但如果您告诉我另一种样式设置方式，我将不胜感激，因为我在一个半月前才开始编码，但我并不是很擅长。

@jsejcksn 这样的用户将无法在现代世界中生存。

@Hilex23 这里有一些资源：MDN, CSS-Tricks

【参考方案1】：

添加溢出：隐藏；到 css 标签以隐藏水平和垂直滚动条。

例子

body 
overflow: hidden; /* Hide scrollbars */

要只隐藏垂直滚动条，或者只隐藏水平滚动条，请使用overflow-y 或overflow-x：

例子

body 
overflow-y: hidden; /* Hide vertical scrollbar /
overflow-x: hidden; / Hide horizontal scrollbar */

【参考方案2】：

你可以使用这个：

::-webkit-scrollbar 
    display: none;

但它在 Firefox 和 IE/Edge 中不受支持。 :)

【讨论】：

将元素或选择器放在两列之前

【参考方案3】：

在你的 CSS 中添加这个

.classname::-webkit-scrollbar 
    display: none; /* for Chrome, Safari and Opera */


.classname
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */