div弹出html页面滚动条滚动,html – 用浏览器的主滚动条滚动特定的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测试。

我假设主要内容的流体宽度和侧边栏的静态宽度，但两者都可以完美地流畅，如您所愿。如果你想要一个静态的宽度，那么看看this demo fiddle这使得标记更加简单。

更新

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