我正在为我的网站进行新的布局，我遇到了GIZMODO 网站，我发现该网站可以利用页面滚动条来滚动网站中的部分内容。他们怎么能做到？我通过 Firebug 研究了他们的 CSS，但我很困惑。
这是我的测试页面 1：http://raptor.hk/dev/theme/dummy.html（此页面可以使内容居中，但不能随意滚动）
这是我的测试页面 2：http://raptor.hk/dev/theme/dummy2.html（此页面可以随意滚动，但不能居中）
我只想让页面左侧内容滚动页面滚动条，但右侧内容保持在原始位置，加上整个网站应该对齐中心，即结合我的测试页面1和2。任何人都可以给给我点灯？
【问题讨论】：
虽然您的 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>
在Win7 IE7、IE8、IE9、Opera 11.50、Safari 5.0.5、FF 5.0、Chrome 12.0 中测试。
我假设主要内容的宽度是流动的，侧边栏的宽度是静态的，但两者都可以完全是流动的，只要你喜欢。如果您想要静态宽度，请参阅 this demo fiddle，这会使标记更简单。
如果我正确理解了您的评论，那么您希望在鼠标悬停在侧边栏上时阻止滚动主要内容。为此，侧边栏可能不是主要内容的滚动容器（即浏览器窗口）的子项，以防止滚动事件冒泡到其父项。
我认为这个 new demo fiddle 可以满足您的需求：
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
【讨论】：
我误解了你的问题。我以为您希望主滚动条也可以滚动另一个 div 中的内容。好吧，给你：
$(function(){
$(document).scroll(function(){
$('#my_div').stop().animate({
scrollTop : $(this).scrollTop()
});
});
});
【讨论】：
您可以使用position:fixed 执行此操作。 GIZMODO 样式表中的相关部分：
#rightcontainer {
position: fixed;
margin-bottom: 10px;
width: 300px;
height: 100%;
top: 0;
}
【讨论】：
今天在许多网站上都可以看到这种技术。他们所做的就是将position: fixed赋给屏幕右侧的div，使其不受页面滚动的影响。
CSS：
body {
position: relative;
}
#leftSide {
width: 600px;
...rules ...
}
#rightSide {
position: fixed;
left: 610px;
}
HTML：
<body>
<div id="leftSide">
affected by scrolling
</div>
<div id="rightSide">
Not affected by scrolling
</div>
</body>
【讨论】：
我假设您正在寻找类似的东西。
请注意，您可以根据需要更改 #main_content 的宽度，只要它不会出现在您的固定菜单“后面”，因为您的文本会消失。
在居中的容器中将固定菜单置于右侧的诀窍是使用left: 50% 和margin-left 正确调整它。
例如。您有一个container-宽度为960px，固定菜单宽度为300px，使用left: 50%，固定菜单右侧会有一个空白区域（960/2 - 300 = 180） .然后用margin-left: 180px;调整它
【讨论】：
将页面“居中”（即内容 + 右面板）的一种方法是在使右面板位置固定的同时调整边距。所以，如果你有一个div#content 和一个div#rightPanel，css 可能看起来像：
#content {
margin-left: 15%; /* left page margin */
margin-right: 25%; /* right page margin + rightPanel's width */
}
#rightPanel {
position: fixed;
top: 0;
right: 15%; /* right page margin */
width: 10%;
}
只需确保#content 的左边距与#rightPanel 的右边距相同。
【讨论】：