5

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>

</p>

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

</p>

これはhttp://jsfiddle.net/gtyBn/の例です

4

2 に答える 2

2

このコードでうまくいきますが、ハンドラーの動作を少し調整する必要があるかもしれません。このコードのほとんどは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;
于 2012-11-19T23:57:56.143 に答える
1

マウスホイールプラグインhttp://brandonaaron.net/code/mousewheel/demosをいじってみるか、おそらく他のものを見つけるか、独自のソリューションを作成することさえできますが、それは方向性のように見えます

于 2012-11-19T23:49:40.020 に答える