布局:
http://img62.imageshack.us/img62/9243/scrollcontent.png
粉色区域是页面布局。
黑色区域应始终位于橙色区域的正下方。
因此，例如，当橙色区域的高度仅为 200px，而不是 600px(如上图所示)时，黑色区域仍将位于橙色区域正下方 200px，而不是 600px。
而我现在想做的是，当我移动窗口滚动条时，我希望橙色区域中的内容先滚动(橙色区域不应该有滚动条!)。一旦我到达橙色区域内容的底部，我就可以再次向下滚动常规页面。
有人知道怎么做吗？我希望它不会太困惑。
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<style>
body{
background-color:#c3c3c3;
}
.layout{
margin:0px auto;
padding:30px 0px;
width:900px;
height:3000px;
background-color:#f09;
}
.orange_area{
margin:0px auto;
width:500px;
max-height:600px;
overflow:hidden;
background-color:#ff7f27;
}
.black_area{
margin:0px auto;
width:500px;
height:50px;
background-color:#000;
}
</style>
<script>
$(document).ready(function()
{
$(window).scroll(function()
{
//...
});
});
</script>
</head>
<body>
<div class="layout">
<div class="orange_area"><div class="content"></div></div>
<div class="black_area"></div>
</div>
</body>
</html>
最佳答案
基于对问题的理解，您将无法欺骗主体滚动条(显示为窗口滚动条的滚动条)移动和不移动其内容。
但是你可以尝试一个可能的技巧
当您展示广告时，设置正文 overflow:hidden;，它应该隐藏默认的正文滚动条。但是您应该将广告放入一个透明容器中，该容器占据窗口客户区域的整个大小并将广告放入其中。
当广告超出其高度时，将显示滚动条来代替窗口滚动条。所以它看起来就像是主体滚动条。
但是当您滚动到广告底部时会遇到问题。这意味着滚动位置将设置在底部。此时您应该再次切换滚动条...但是主体滚动条将位于顶部位置，因为内容尚未滚动。
我认为这不能以用户友好的方式完成。至少没有默认滚动条。
自定义滚动条控件
您可以提供自己的滚动条控件(position:fixed;height:100%;right:0;)并使用它来根据需要滚动内容。但这是否可行取决于您。
关于jquery - 使用浏览器滚动条滚动内容 div (css/jquery)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4826264/