在 div 外滚动会滚动内容答案

【问题标题】：Scrolling outside the div will scroll content在 div 外滚动会滚动内容
【发布时间】：2012-11-19 23:29:23
【问题描述】：

我如何才能在 div 之外滚动，并且在我的情况下，动作将被分配给具有隐藏溢出的固定 div 是#scrollable_content。

HTML

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

CSS

html, body {
    height:100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
div { margin: 0; padding: 0;}
div#header{position:absolute;top:0;width:100%;border:1px solid black;}
div#footer{position:absolute; bottom:0; width:100%; border:1px solid black;}

div#scrollable_content {
    height: 300px;
    overflow-y:auto;
    position: static;
    border: 1px solid green;
    margin: 150px;
}

这是http://jsfiddle.net/gtyBn/的例子

【问题讨论】：

澄清一下，如果用户在页面上的任意位置滚动鼠标滚轮，而不仅仅是在 div 上方，您希望 #scrollable_content 滚动？
你说的是javascript事件吗，比如$('#scrollable_conten').on('scroll', function(){...})？
是的，在页面上并使用 jquery
应该类似于 $('body')....
是的，但是问题 scoll 事件只有在页面实际 scolling 时才会触发，否则不会

标签： javascript jquery html css scroll

【解决方案1】：

此代码可以解决问题，尽管您可能需要稍微调整处理程序的工作方式。大部分代码来自http://www.adomas.org/javascript-mouse-wheel/，尽管我确实修改了句柄函数以满足您的需求。

/** 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;

【讨论】：

【解决方案2】：

尝试使用鼠标滚轮插件http://brandonaaron.net/code/mousewheel/demos，或者您可能会找到其他的，甚至创建自己的解决方案，但它看起来像工作方向

【讨论】：