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

Question

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

Answer 1

与前面的答案一样，您将使用 overflow:hidden 来禁用 body/div 上的滚动条。

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

对于方向键，你可以绑定(bind)keydown事件来识别方向键，然后将div的scrollTop和scrollLeft修改为适合模拟滚动。(注意:您使用 keydown 而不是 keypress 因为 IE 无法识别 keypress 方向键。)
编辑: 我无法让 FF/Chrome 识别 div 上的 keydown，但它在 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