使用浏览器滚动条滚动内容 div (css/jquery)
布局：
http://img62.imageshack.us/img62/9243/scrollcontent.png< /a>
粉色区域是页面布局。
黑色区域应始终位于橙色区域的正下方。
因此，例如，当橙色区域的高度仅为 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>
Layout:
http://img62.imageshack.us/img62/9243/scrollcontent.png
The pink area is the page layout.
The black area should always stay right below the orange area.
So, for example, when the height of the orange area is only 200px, instead of the 600px (as shown on the picture above), the black area would still be right below the orange area at 200px, and not 600px.
And what I want to do now is, when I move the window scrollbar I want the content in the orange area to scroll first (the orange area should not have scrollbars!). And as soon as I hit the bottom of the content in the orange area I can scroll down the regular page again.
Does anoyne know how to do this? I hope it's not too confusing.
<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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
根据对问题的理解，您将无法欺骗主体滚动条（显示为窗口滚动条的滚动条）移动或不移动其内容。
但您可以尝试一个可能的技巧：
当您展示广告时，设置正文
overflow:hidden;这应该隐藏默认的正文滚动条。但是您应该将广告放入一个透明容器中，该容器占据窗口客户区域的整个大小并将广告放入其中。当广告超出其高度时，将显示滚动条来代替窗口滚动条。所以它看起来就像是主体滚动条。
但是当您滚动到广告底部时会遇到问题。这意味着滚动位置将设置在底部。此时您应该再次切换滚动条...但是主体滚动条将位于顶部位置，因为内容尚未滚动。
我认为这不能以用户友好的方式完成。至少对于默认滚动条来说是这样。
自定义滚动条控件
您可以提供自己的滚动条控件 (
position:fixed;height:100%;right:0;) 并使用它来根据需要滚动内容。但这是否可行由您决定。Base on the understanding of the problem, you won't be able to trick the body scrollbar (the one displayed as window scrollbar) to move and not to move its content.
But a possible trick you could try
When you show the ad, set body
overflow:hidden;which should hide the default body scrollbars. But you should put your ad into a transparent container that takes the whole size of the window client area and put ad in it.When the ad would exceed it's height a scrollbar would be shown in place of the window scrollbar. So it would look as if it's the body scrollbar.
But you will have a problem when you scroll to the bottom of the ad. This would mean that scroll position would be set at the bottom. At that point you should switch scrollbars again... But body scrollbar would be at the top position since content wasn't scrolled yet.
I don't think this can be done in a user-friendly way. At least not with default scrollbars.
Custom scrollbar controls
You could provide your own scrollbar control (
position:fixed;height:100%;right:0;) and use that to scroll your content as you wish. But it's up to you to decide whether that's feasible.