滚动股利外将滚动内容

Question

我怎么可能做的伎俩滚动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/

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

Answer 2

尝试玩弄鼠标滚轮插件http://brandonaaron.net/code/mousewheel/demos，或很可能你会发现一些其他的，甚至可以创建自己的解决方案，但它看起来像工作方向