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

尽管您的Gizmodo示例使用了其他脚本来处理侧边栏（的垂直滚动条）（甚至在所有浏览器中都不起作用），但是使用纯CSS效果是完全可能的，甚至还没有看起来那么困难第一眼。

所以你要：

• 水平居中的布局，可能会针对不同的浏览器窗口大小进行加宽或变窄，
• 左侧的主要内容可通过浏览器的主滚动条垂直滚动，
• 右侧的侧栏位于浏览器窗口的顶部，可与主要内容分开滚动，并且仅在鼠标悬停时显示其滚动栏。滚动到侧栏的末尾时，窗口的滚动条将接管。

看到这个 示范小提琴 ，它做了所有的事情。

样式表：

html, body, * {    padding: 0;    margin: 0;}.wrapper {    min-width: 500px;    max-width: 700px;    margin: 0 auto;}#content {    margin-right: 260px;  }#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; }

和标记：

<div >    <div id="content">    </div></div><div id="overlay">    <div >        <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>