使用浏览器的主滚动条滚动特定的DIV内容 [英] Scroll particular DIV contents with browser's main scrollbar

问题描述

我正在开发我的网站的新版面配置我遇到 GIZMODO 网站，我发现该网站可以利用页面滚动条滚动网站中的部分内容。他们如何做到？我通过Firebug学习他们的CSS，但我很困惑。

I am working on new layout of my site & I come across GIZMODO site, I found that the site can make use of page scroll bar to scroll part of the contents in the site. How can they make it ? I studied their CSS via Firebug, but I am quite confused.

这是我的测试页1： http://raptor.hk/dev/theme/dummy.html （此页面可以将内容居中，但无法根据需要滚动）

Here is my testing page 1 : http://raptor.hk/dev/theme/dummy.html (this page can center the contents, but cannot scroll as I want)

这是我的测试页2： http://raptor.hk/dev/theme/dummy2.html （此页面可以根据需要进行滚动，但不能居中）

Here is my testing page 2 : http://raptor.hk/dev/theme/dummy2.html (this page can scroll as I want, but cannot center)

我只想让页面的左侧内容与页面滚动条滚动，右侧内容保持在原始位置，加上整个站点应该对齐中心，即组合我的测试页1&

I just want to make the page with left side content scrolling with page scroll bar, but right side content stays in the original position, plus the whole site should align center, i.e. combining my testing page 1 & 2. Can anyone give me some lights?

推荐答案

虽然你的Gizmodo示例使用额外的脚本来处理（垂直滚动条）侧边栏（甚至不能在所有浏览器中工作），使用纯CSS的效果是完全可能的，它甚至不是一样困难的一见钟情。

Though your Gizmodo example uses additional scripts for handling of (the vertical scroll bar of) the sidebar (which even doesn't work in all browsers), the effect is perfectly possible with pure CSS and it even is not as difficult as it may seem at first sight.

您想要：

• 水平居中的布局，可能会因不同的浏览器窗口大小而加宽或缩小，


• 左侧的主要内容可以通过浏览器的主滚动条垂直滚动，


• 右侧的侧边栏粘贴在浏览器窗口顶部，可单独滚动从主要内容，并且只有当鼠标悬停在其滚动条时显示。

查看此 演示小提琴 可以做到这一点。

See this demonstration fiddle which does all that.

样式表： / p>

The style sheet:

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 */
}

p>

And the markup:

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

< Chrome 12.0。

Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.

我假设主要内容的宽度和侧边栏的静态宽度，但两者都可以完美的流畅，你喜欢。如果您想要一个静态宽度，请参阅 此演示程序 ，这使标记更简单

I assumed a fluid width for the main content and a static width for the sidebar, but both can perfectly be fluid, as you like. If you want a static width, then see this demo fiddle which makes the markup more simple.

如果我正确理解您的评论，那么您想要防止主要内容的滚动鼠标在侧边栏上。为此，边栏可能不是主内容（即浏览器窗口）的滚动容器的子元素，以防止滚动事件向其父元素冒泡。

If I understand your comment correctly, then you want to prevent scrolling of the main content when the mouse is over the sidebar. For that, the sidebar may not be a child of the scrolling container of the main content (which was the browser window), to prevent the scroll event from bubbling up to its parent.

我认为这 新演示提琴 可满足您的需要：

I think this new demo fiddle does what you want:

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

这篇关于使用浏览器的主滚动条滚动特定的DIV内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！