我想从我的div元素和我的整体中隐藏任何滚动条body，但仍然让用户使用鼠标滚轮或箭头键滚动。如何使用原始 JavaScript 或 jQuery 实现这一点？有任何想法吗？
如何禁用浏览器或元素滚动条，但仍允许使用滚轮或箭头键滚动？
IT技术
javascript
jquery
css
browser
scrollbar
2021-01-11 19:56:10
6个回答
与之前的答案一样，您将使用overflow:hidden禁用 body/div 上的滚动条。
然后您将mousewheel事件绑定到一个函数，该函数将更改scrollTopdiv 的 以模拟滚动。
对于箭头键，则可以将绑定keydown识别箭头键的事件，然后更改scrollTop和scrollLeft股利的适当效仿滚动。（注意：您使用keydown而不是keypress因为 IE 无法识别keypress箭头键。）
编辑：我无法让 FF/Chromekeydown在 div上识别，但它适用于 IE8。根据您的需要，您可以在 上设置一个keydown侦听器document来滚动 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 参考
mousewheel 插件
keydown, keypress @ quirksmode
2012 年 12 月 19 日更新：
鼠标滚轮插件的更新位置在： https://github.com/brandonaaron/jquery-mousewheel
纯 CSS 解决方案怎么样？我已经测试过了，它工作正常。但是，我会推荐解决方案 3，因为它并不笨拙，所有带有 JS 的浏览器都支持它，而且它非常简单。
解决方案 1（跨浏览器但更笨拙）
#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是，根据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）并且有一个演示可用在这里。可以使用 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>
您不必使用 jquery 或 js 来实现这一点。它使用简单的 webkit 性能更高。
只需将下面的代码添加到您的 css 文件中。
::-webkit-scrollbar {
display: none;
}
小心！这将禁用所有滚动条，因此如果您只想隐藏一个，请确保将其放在特定的类或 id 中。
我更喜欢 SamGoody 为这个问题的副本提供的答案。它保持原生滚动效果不变，而不是尝试为一些特定的输入设备手动重新实现：
更好的解决方案是将目标 div 设置为 overflow:scroll，并将其包裹在第二个窄 8px 的元素中，即 overflow:hidden。
有关充实的示例，请参阅原始评论。您可能希望使用 JavaScript 来确定滚动条的实际大小，而不是像他的示例那样假设它们总是 8px 宽。
为了让这个对我有用，我使用了这个 CSS：
html { overflow-y: hidden; }
但是我在使用时遇到了问题$(this).scrollTop()，所以我绑定到我的#id，但是调整了窗口的 scrollTop。此外，我的平滑滚动鼠标会触发大量 1 或 -1 的增量，因此我将其乘以 20。
$("#example").bind("mousewheel", function (ev, delta) {
var scrollTop = $(window).scrollTop();
$(window).scrollTop(scrollTop - Math.round(delta * 20));
});
其它你可能感兴趣的问题