问题描述
我想从我的 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.)
结果
结果
怪异模式
更新2012年12月19日:
鼠标滚轮插件的更新的位置是:https://github.com/brandonaaron/jquery-mousewheel
The updated location of the mousewheel plugin is at: https://github.com/brandonaaron/jquery-mousewheel
这篇关于如何禁用浏览器或元素的滚动条,但仍允许带滚轮或箭头键滚动?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!