html - 使用浏览器的主滚动条滚动特定的 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 完全可以实现这种效果，甚至没有像乍一看似乎是这样。

所以你想要:

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

看到这个 demonstration fiddle 完成所有这些工作。

样式表:

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 上测试。

我假设主要内容的宽度是流动的，侧边栏的宽度是静态的，但两者都可以完全流动，如您所愿。如果您想要静态宽度，请参阅 this demo fiddle 这使得标记更加简单。

更新

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

我认为这 new demo fiddle 做你想做的:

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