如何禁用浏览器或元素的滚动条，但仍允许带滚轮或箭头键滚动？ [英] How can I disable a browser or element scrollbar, but still allow scrolling with wheel or arrow keys?

问题描述

我想从我的 DIV 元素和我的整个隐藏任何滚动体，但还是让用户滚动用鼠标滚轮或箭头键。这怎么能与原始JavaScript或jQuery的实现？任何想法？

I want to hide any scrollbars from my div elements and my whole body, but still let the user scroll with the mouse wheel or arrow keys. How can this be achieved with raw JavaScript or jQuery? Any ideas?

推荐答案

像previous答案，你可以使用溢出：隐藏来禁用的滚动条身体/ DIV。

Like the previous answers, you would use overflow:hidden to disable the scrollbars on the body/div.

然后，你的滚轮事件将改变div的 scrollTop的来模拟功能绑定滚动。

Then you'd bind the mousewheel event to a function that would change the scrollTop of the div to emulate scrolling.

有关箭头键，你会在的keydown 事件绑定识别箭头键，然后更改 scrollTop的和 scrollLeft 股利适当效仿滚动。
（注：使用的keydown 而不是键preSS 因为IE不能识别键preSS 的箭头键。）结果
修改我不能让FF / Chrome浏览器识别的keydown 上一个div，但它工作在IE8。根据你所需要这个什么，你可以设置在文件 A 的keydown 监听器滚动股利。 （退房的关键code引用作为一个例子。）

For arrow keys, you would bind the keydown event to recognize an arrow key, and then change scrollTop and scrollLeft of the div as appropriate to emulate scrolling. (Note: you use keydown instead of keypress since IE doesn't recognize keypress for arrow keys.)
I couldn't get FF/Chrome to recognize keydown on a div, but it works in IE8. Depending on what you needed this for, you can set a keydown listener on the document to scroll the div. (Check out the keyCode reference as an example.)

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

For example, scrolling with the mouse wheel (using jQuery and a mousewheel plugin):

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

（这是一个快速的小样，你必须调整数量，因为对我来说，这才缓缓滚动了一下。）

(This is a quick mockup, you'd have to adjust the numbers since for me, this scrolls a bit slowly.)

键code参考结果
鼠标滚轮插件结果
KEYDOWN，关键$ P $ @ PSS 怪异模式

更新2012年12月19日：

鼠标滚轮插件的更新的位置是：<一href=\"https://github.com/brandonaaron/jquery-mousewheel\">https://github.com/brandonaaron/jquery-mousewheel

The updated location of the mousewheel plugin is at: https://github.com/brandonaaron/jquery-mousewheel

这篇关于如何禁用浏览器或元素的滚动条，但仍允许带滚轮或箭头键滚动？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！