css - 如何使用主窗口垂直滚动条使外部 <div> 固定而内部 <div> 可滚动

Question

请看这个:

http://jsfiddle.net/sS7HN/2/

我想要实现的是代替内部滚动条，我想使用主窗口滚动条；这样我就可以使用 Windows 垂直滚动条浏览 innerContent 中的内容，但同时我想要外部 div(content 和 mainContent ) 进行修复。

这可能吗？

CSS

#header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 50px;
}

#footer {
    position: fixed;
    left: 0;
    bottom:0;
    width: 100%;
}

#content {
    background-color:#656565;
    width: 300px;
    margin:0 auto;
    padding-top:10px;
    border-radius:5px;
}

#mainContent {
    margin:0px auto;
    background-color:#515151;
    width:250px;
    border-radius:5px;
    padding-top:20px;
}

#contentHolder {
    color:#fff;
    margin:0 auto;
    width:200px;
    height: 400px;
    background-color:#000000;
    border-radius:10px;
    overflow:auto;
}

HTML

<div id="header">cfdvfvdfvfv</div>
<div id="content">
    <div id="mainContent">
        <div id="contentHolder">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam dictum imperdiet lacus in aliquet. Nam leo
            risus, bibendum vel varius non, porta vel orci. Integer scelerisque est eu augue tempus lfvdvdfvuctus.
            Aliquam erat volutpat. Phasellus vulputate dolor ligula.
        </div>
    </div>
</div>
<div id="footer"></div>

Answer 1

@Daedalus 在 this answer to a question similar to yours 中为此写了一些 jQuery .

jQuery 代码如下(编辑:更改它以匹配您的代码):

var curScroll = 0;

$(window).bind('mousewheel DOMMouseScroll', function(e){
    var evt = window.event || e;
    var delta = evt.detail? evt.detail*(-120) : evt.wheelDelta;
    if(delta < 0) {
        //scroll down
        curScroll += 10;
    }
    else {
        //scroll up
        curScroll -= 10;
    }
    $('#contentHolder').scrollTop(curScroll);
    return true;
});