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

Question

我正在设计网站的新布局，并且遇到了GIZMODO网站，我发现该网站可以利用页面滚动条来滚动网站中的部分内容。他们怎么做呢？我通过Firebug研究了他们的CSS，但是我很困惑。

这是我的测试页面1：此页面可以使内容居中，但不能根据需要滚动）

这是我的测试页面2：:（此页面可以根据需要滚动，但无法居中）

我只想使页面的左侧内容与页面滚动条一起滚动，但右侧内容保持原始位置，并且整个网站应居中对齐，即结合我的测试页面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，Opera 11.50，Safari 5.0.5，FF 5.0，Chrome 12.0的Win7上进行了测试。

我假设主要内容的流动宽度和侧边栏的静态宽度，但是根据您的需要，两者都可以完全流动。如果您想要一个静态宽度，那么请看

更新资料

如果我正确理解您的评论，那么您希望防止鼠标悬停在侧边栏上时滚动主要内容。为此，侧边栏可能不是主要内容的滚动容器（它是浏览器窗口）的子级，以防止滚动事件冒泡到其父级。

我认为这个您的需求：

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