使用浏览器的主滚动条滚动特定的DIV内容

Question

我正在对我的站点进行新的布局&我偶然发现GIZMODO站点，我发现该站点可以利用页面滚动条来滚动站点中的部分内容。他们是怎么做到的？我通过Firebug研究了他们的CSS，但我很困惑。

这是我的测试页面1：http://raptor.hk/dev/theme/dummy.html (这个页面可以居中显示内容，但是不能像我想要的那样滚动)

这是我的测试页面2：http://raptor.hk/dev/theme/dummy2.html (这个页面可以随意滚动，但不能居中)

我只是想让页面的左侧内容滚动页面滚动条，但右侧的内容停留在原来的位置，加上整个网站应该对齐中心，即合并我的测试页面1和2。有人能给我一些光吗？

Answer 1

尽管你的Gizmodo示例使用了额外的脚本来处理侧边栏(的垂直滚动条)(它甚至不能在所有浏览器中工作)，但使用纯CSS是完全可能的，而且它甚至不像乍看起来那么困难。

所以你想要：

• 水平居中布局，根据浏览器窗口大小的不同可能变宽或变窄，
• 左侧的主要内容可通过浏览器的主滚动条垂直滚动，
• 右侧的侧边栏位于浏览器窗口的顶部，可独立于主要内容滚动，并且仅当鼠标悬停在上方时才显示其滚动条。当滚动到侧边栏的末尾时，窗口的滚动条就会接管。

请看这个，它可以完成所有这些任务。

样式表：

html, body, * {
    padding: 0;
    margin: 0;
}
.wrapper {
    min-width: 500px;
    max-width: 700px;
    margin: 0 auto;
}
#content {
    margin-right: 260px;  /* = sidebar width + some white space */
}
#overlay {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
}
#overlay .wrapper {
    height: 100%;
}
#sidebar {
    width: 250px;
    float: right;
    max-height: 100%;
}
#sidebar:hover {
    overflow-y: auto;
}
#sidebar>* {
    max-width: 225px; /* leave some space for vertical scrollbar */
}

和标记：

<div class="wrapper">
    <div id="content">
    </div>
</div>
<div id="overlay">
    <div class="wrapper">
        <div id="sidebar">
        </div>
    </div>
</div>

在IE7，IE8，IE9，Opera11.50，Safari5.0.5，FF 5.0，Chrome12.0的Win7上测试。

我假设主内容的宽度是流动的，侧边栏的宽度是静态的，但两者都可以完全流动，就像你喜欢的那样。如果您想要静态宽度，请参见，它使标记更加简单。

更新

如果我正确理解了您的注释，那么当鼠标位于侧边栏上时，您希望阻止主要内容的滚动。为此，侧边栏可能不是主要内容的滚动容器(即浏览器窗口)的子项，以防止滚动事件冒泡到它的父项。

我认为这个做了你想要的：

<div id="wrapper">
    <div id="content">
    </div>
</div>
<div id="sidebar">
</div>

Answer 2

我误解了你的问题。我还以为你希望主滚动条也能在另一个div中滚动内容。好了，这是你要的：

$(function(){
    $(document).scroll(function(){
        $('#my_div').stop().animate({
            scrollTop : $(this).scrollTop()
        });            
    });
});

演示：http://jsfiddle.net/AlienWebguy/c3eAa/

Answer 3

您可以使用position:fixed来实现这一点。GIZMODO样式表中的相关部分：

#rightcontainer {
    position: fixed;
    margin-bottom: 10px;
    width: 300px;
    height: 100%;
    top: 0;
}