Javascript 在div外滚动将滚动内容
我如何才能在div外滚动,操作将分配给隐藏溢出的固定div,在我的例子中是“可滚动”内容 HTMLJavascript 在div外滚动将滚动内容,javascript,jquery,html,css,scroll,Javascript,Jquery,Html,Css,Scroll,我如何才能在div外滚动,操作将分配给隐藏溢出的固定div,在我的例子中是“可滚动”内容 HTML <div id="container"> <div id="header">Header</div> <div id="scrollable_content"> Very long content<br /> Very long content<br />
<div id="container">
<div id="header">Header</div>
<div id="scrollable_content">
Very long content<br />
Very long content<br />
...
Very long content<br />
Very long content<br />
</div>
<div id="footer">Footer</div>
这是一个例子,尝试使用mousewheel插件,或者您可能会找到其他插件,甚至创建自己的解决方案,但看起来工作方向是这样的,尽管您可能需要调整处理程序的工作方式。虽然我修改了handle函数以满足您的需要,但大部分代码都来自
/** This is high-level function.
* It must react to delta being more/less than zero.
*/
function handle(delta) {
var target = $('#scrollable_content');
var top = target.scrollTop() - delta;
target.scrollTop(top);
}
/** Event handler for mouse wheel event.
*/
function wheel(event){
var delta = 0;
if (!event) /* For IE. */
event = window.event;
if (event.wheelDelta) { /* IE/Opera. */
delta = event.wheelDelta/120;
} else if (event.detail) { /** Mozilla case. */
/** In Mozilla, sign of delta is different than in IE.
* Also, delta is multiple of 3.
*/
delta = -event.detail/3;
}
/** If delta is nonzero, handle it.
* Basically, delta is now positive if wheel was scrolled up,
* and negative, if wheel was scrolled down.
*/
if (delta) handle(delta);
/** Prevent default actions caused by mouse wheel.
* That might be ugly, but we handle scrolls somehow
* anyway, so don't bother here..
*/
if (event.preventDefault) event.preventDefault();
event.returnValue = false;
}
if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;
为了澄清,如果用户在页面上的任何地方滚动鼠标滚轮,而不仅仅是在div上,那么您希望滚动可滚动的内容?您是在谈论javascript事件,比如$('scroll',function(){…})。在('scroll',function(){…})上?是的,在页面上和使用jquerys时应该是$('body')……是的,但是问题scoll事件只会在页面发生实际scoll时触发,否则不会触发