Question

布局：

http://img62.imageshack.us/img62/9243/scrollcontent.png

粉色区域是页面布局。

黑色区域应始终位于橙色区域的正下方。

因此，例如，当橙色区域的高度仅为200px而不是600px时（如上图所示），黑色区域仍然位于橙色区域正下方200px，而不是600px。

我现在要做的是，当我移动窗口滚动条时，我希望橙色区域中的内容先滚动（橙色区域不应该有）滚动条！）。当我点击橙色区域内容的底部时，我可以再次向下滚动常规页面。

anoyne知道怎么做吗？我希望它不会太混乱。

<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>

Answer 1

基于对问题的理解，您将无法欺骗身体滚动条（显示为窗口滚动条的滚动条）移动而不移动其内容。

但是你可以尝试一种可能的技巧

展示广告时，请设置正文隐藏默认正文滚动条的正文overflow:hidden;。但是您应该将广告放入一个透明的容器中，该容器占用窗口客户区的整个大小并将广告放入其中。

当广告超过其高度时，将显示滚动条代替窗口滚动条。所以它看起来好像是身体滚动条。

但当您滚动到广告底部时，您会遇到问题。这意味着滚动位置将设置在底部。此时你应该再次切换滚动条...但是由于内容尚未滚动，因此正文滚动条将位于顶部位置。

我认为这不能以用户友好的方式完成。至少不能使用默认滚动条。

自定义滚动条控件

您可以提供自己的滚动条控件（position:fixed;height:100%;right:0;）并使用它来根据需要滚动内容。但是由你来决定这是否可行。

使用浏览器滚动条滚动内容div（css / jquery）

1 个答案:

但是你可以尝试一种可能的技巧

自定义滚动条控件