使用浏览器的主滚动条滚动特定的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的效果完全可能,它甚至不像看起来那么困难第一眼.

所以你要:

• 水平居中的布局,可能针对不同的浏览器窗口大小加宽或缩小,
• 左侧的主要内容可由浏览器的主滚动条垂直滚动,
• 右侧的侧边栏粘贴在浏览器窗口的顶部,可以与主要内容分开滚动,并且只在鼠标悬停时显示其滚动条.滚动到侧边栏的末尾时,窗口的滚动条将接管.

看到这个演示小提琴,它完成了所有这些.

样式表:

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上测试过.

我假设主要内容的流体宽度和侧边栏的静态宽度,但两者都可以完全流畅,如你所愿.如果你想要一个静态宽度,那么看看这个演示小提琴,它使标记更简单.

更新

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

我认为这个新的演示小提琴可以满足您的需求:

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

Answer 2

我误解了你的问题。我以为你想让主滚动条也滚动另一个 div 中的内容。好吧，给你：

$(function(){
    $(document).scroll(function(){
        $('#my_div').stop().animate({
            scrollTop : $(this).scrollTop()
        });            
    });
});

演示： http: //jsfiddle.net/AlienWebguy/c3eAa/