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

尽管您的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 */
}


和标记：

在IE7，IE8，IE9，Opera 11.50，Safari 5.0.5，FF 5.0，Chrome 12.0的Win7上进行了测试。

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

更新资料

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

我认为这个您的需求：