Question

请看这个：

我想要实现的是代替内部滚动条，我想使用主窗口滚动条;这样我就可以使用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;
});

Answer 2

正如我在上面的评论中所提到的，CSS based example is available。

你也想要圆角。您可以通过为内容添加一些额外的填充，然后在其顶部和底部添加一些fixed页面边缘来实现此目的。

Modified sample, with rounded corners

关键位是：

#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的。

因此，条带需要距离页面边缘90px，而不是 100px的。

如何在使用主窗口垂直滚动条</div> </div>滚动内部<div>时固定外部<div>

2 个答案: