如何禁用浏览器或元素滚动条，但仍允许使用滚轮或箭头键滚动？答案

【问题标题】：How can I disable a browser or element scrollbar, but still allow scrolling with wheel or arrow keys?如何禁用浏览器或元素滚动条，但仍允许使用滚轮或箭头键滚动？
【发布时间】：2010-11-22 12:45:15
【问题描述】：

我想从我的div 元素和整个body 中隐藏任何滚动条，但仍让用户使用鼠标滚轮或箭头键滚动。如何使用原始 JavaScript 或 jQuery 实现这一点？有什么想法吗？

【问题讨论】：

我在link 上回答了同样的问题。我希望它对某人有所帮助。
github.com/lsvx/hide-bars

标签： javascript jquery css browser scrollbar

【解决方案1】：

与之前的答案一样，您可以使用 overflow:hidden 禁用 body/div 上的滚动条。

然后您将mousewheel 事件绑定到一个函数，该函数将更改div 的scrollTop 以模拟滚动。

对于箭头键，您将绑定keydown 事件以识别箭头键，然后根据需要更改 div 的scrollTop 和scrollLeft 以模拟滚动。（注意：您使用 keydown 而不是 keypress，因为 IE 无法识别箭头键的 keypress。）
编辑：我无法让 FF/Chrome 识别 @ 987654336@ 在 div 上，但它在 IE8 中有效。根据您的需要，您可以在document 上设置keydown 侦听器以滚动div。（以 keyCode 参考为例。）

例如，使用鼠标滚轮滚动（使用 jQuery 和鼠标滚轮插件）：

<div id="example" style="width:300px;height:200px;overflow:hidden">
insert enough text to overflow div here
</div>

<script>
$("#example").bind("mousewheel",function(ev, delta) {
    var scrollTop = $(this).scrollTop();
    $(this).scrollTop(scrollTop-Math.round(delta));
});
</script>

（这是一个快速模型，你必须调整数字，因为对我来说，这滚动有点慢。）

keyCode reference
mousewheel plugin
keydown, keypress @ quirksmode

2012 年 12 月 19 日更新：

鼠标滚轮插件更新位置为：https://github.com/brandonaaron/jquery-mousewheel

【讨论】：

如果你想隐藏 BODY 上的滚动条，然后将鼠标滚轮绑定到 body 滚动条，我无法让它工作。
@DavidBarnes hm 看起来很多东西在 3 年后已经过时了。我必须从 github 获取更新的鼠标滚轮插件，并且要滚动工作，我必须绑定到文档而不是正文。这是我的例子：pastebin.com/U08b6MCx
@radry 的评论：最佳答案中建议的解决方案不再有效，即使“更新”评论也不起作用。至少我的鼠标滚轮什么也没做。 2014年如何解决？

【解决方案2】：

纯 CSS 解决方案怎么样？我已经对此进行了测试，并且效果很好。不过，我会推荐解决方案 3，因为它并不老套，所有带有 JS 的浏览器都支持它，而且非常简单。

解决方案 1（跨浏览器但更 hacky）

#div {
  position: fixed;
  right: -20px;
  left: 20px;
  background-color: black;
  color: white;
  height: 5em;
  overflow-y: scroll;
  overflow-x: hidden;
}

<html>

<body>
  <div id="div">
    Scrolling div with hidden scrollbars!<br/>
    On overflow, this div will scroll with the mousewheel but scrollbars won't be visible.<br/>
    Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
  </div>
</body>

</html>

解决方案 2（仅限 IE 和 Chrome）

只需将nobars 类添加到您想要隐藏滚动条的任何元素。

Firefox overflow: -moz-scrollbars-none 已过时，according to MDN。它以前可以工作，但现在隐藏溢出并禁用滚动（如果使用）。

.nobars {
    /* Firefox: https://developer.mozilla.org/en/docs/Web/CSS/overflow */
    /* overflow: -moz-scrollbars-none; (no longer works) */
    /* IE: https://msdn.microsoft.com/en-us/library/hh771902(v=vs.85).aspx */
    -ms-overflow-style: none;
}
.nobars::-webkit-scrollbar {
    /* Chrome: https://css-tricks.com/custom-scrollbars-in-webkit/ */
    display: none;
}

解决方案 3（跨浏览器 javascript）

Perfect Scrollbar 不需要 jQuery（尽管如果安装了它可以使用 jQuery）并且有一个 demo available here。组件可以使用 css 设置样式，如下例所示：

.ps-scrollbar-y-rail {
  display: none !important;
}

这是一个完整的例子，包括完美滚动条的实现：

<link rel="stylesheet" href="css/perfect-scrollbar.min.css">
<style>
  #container {
    position: relative; /* can be absolute or fixed if required */
    height: 200px; /* any value will do */
    overflow: scroll;
  }
  .ps-scrollbar-y-rail {
    display: none !important;
  }
</style>
<script src='js/perfect-scrollbar.min.js'></script>

<div id="container">
  Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>Scrollable<br>
</div>

<script>
  // on dom ready...
  var container = document.getElementById("container");
  Ps.initialize(container);
  //Ps.update(container);
  //Ps.destroy(container);
</script>

【讨论】：

我明白你的意思。您可以在其后面单独创建一个背景来解决此问题，并使其与滚动的
大小相同。
似乎-moz-scrollbars-none 实际上禁用了滚动。或者有没有办法以某种方式将它与overflow:auto 结合起来？
这曾经可以工作，大概不再是这种情况了。看起来 Javascript 是唯一的选择，直到它被添加到 Firefox :(
@phreakhead 添加了第三种方法，它依赖于 JS 而不是 jQuery。在某些情况下，其他解决方案可能仍然有用。

【解决方案3】：

您不必使用 jquery 或 js 来完成此操作。使用简单的 webkit 可以提高性能。

只需将以下代码添加到您的 css 文件中即可。

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

小心！这将禁用所有滚动条，因此如果您只想隐藏一个，请务必将其放入特定的类或 id。

【讨论】：

是的，但它在其他浏览器中不起作用。据我所知，目前只有 webkit 浏览器允许自定义滚动条。你知道这样的跨浏览器解决方案吗？
@TheLightSabrix 您可能对上面的my IE, Chrome and Firefox answer 感兴趣（参见解决方案2）。我没有费心研究任何其他浏览器，如果您希望我特别尝试任何浏览器，请发表评论。

【解决方案4】：

我更喜欢 SamGoody 为这个问题的副本提供的答案。它使原生滚动效果保持不变，而不是尝试为一些特定的输入设备手动重新实现：

更好的解决方案是将目标 div 设置为 overflow:scroll，并将其包裹在第二个更窄 8px 的元素中，即 overflow:hidden。

请参阅original comment 以获取充实的示例。您可能想使用 JavaScript 来determine the actual size of scrollbars，而不是像他的示例那样假设它们总是 8px 宽。

【讨论】：

很好的建议，但不适用于 Mac，因为它们没有滚动条

【解决方案5】：

为了让这个对我有用，我使用了这个 CSS：

html { overflow-y: hidden; }

但是我在使用$(this).scrollTop() 时遇到了问题，所以我绑定到我的#id，但调整了窗口的滚动顶部。此外，我的平滑滚动鼠标会触发大量 1 或 -1 增量，因此我将其乘以 20。

$("#example").bind("mousewheel", function (ev, delta) {
    var scrollTop = $(window).scrollTop();
    $(window).scrollTop(scrollTop - Math.round(delta * 20));
});

【讨论】：

太棒了。就我而言，我需要的是overflow-x: hidden。谢谢！

【解决方案6】：

正如上面所说的巴尔德拉尼

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

或者你可以这样做

::-webkit-scrollbar{ width: 0px; }

（发布给其他从谷歌搜索中偶然发现的人！）

【讨论】：

【解决方案7】：

好吧，在我看来，这可能不是最直观的，但我可以想象你能够让它成为一种体面的体验，试试这个。

overflow:hidden;

确保父对象具有height 和width，并显示为block

【讨论】：