css - 如何制作外层固定而内部可以使用主窗口垂直滚动条滚动

Question

请看这个：

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

我想要实现的不是那个内部滚动条，而是使用主窗口滚动条；这样我就可以使用 windows 垂直滚动条来浏览内部的内容，innerContent但同时我希望外部 div ( contentand 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 为此在这个与你的问题类似的问题的答案中写了一些 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;
}); 

Answer 2

正如我在上面的评论中提到的，一个基于 CSS 的示例是可用的。

你还想要圆角。你可以通过给内容一些额外的填充来做到这一点，然后fixed在它的顶部和底部添加一些页面边缘。

修改后的样品，带圆角

关键位有：

#content {
    padding: 120px 150px; /* the 120px is the overlay vert height + 10px + 10px */
}
.page_horiz_strip {
    position:fixed;
    left: 150px;
    right: 150px;
    height: 10px;
    background: white;
}
.top_rounded {
    top: 90px; /* 10px less than the overlay vert height */
    border-radius: 10px 10px 0px 0px;
}
.bottom_rounded {
    bottom: 90px; /* 10px less than the overlay vert height */
    border-radius: 0px 0px 10px 10px;
}

笔记

• 我在内容的顶部和底部添加了一个 10px 高的条带（并将条带四舍五入）。
• 叠加垂直高度为 100px。
• 因此内容内边距需要增加到 100px + 10px + 10px。
• 因此，条带需要距离页面边缘 90 像素，而不是 100 像素。