Html 使用浏览器的主滚动条滚动特定的 DIV 内容
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6887112/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Scroll particular DIV contents with browser's main scrollbar
提问by Raptor
I am working on new layout of my site & I come across GIZMODOsite, 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.
我正在对我的网站进行新的布局，我遇到了GIZMODO网站，我发现该网站可以利用页面滚动条来滚动网站中的部分内容。他们怎么能做到呢？我通过 Firebug 研究了他们的 CSS，但我很困惑。
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)
这是我的测试页面 1：http: //raptor.hk/dev/theme/dummy.html（此页面可以将内容居中，但不能随意滚动）
Here is my testing page 2 : http://raptor.hk/dev/theme/dummy2.html(this page can scroll as I want, but cannot center)
这是我的测试页面 2：http: //raptor.hk/dev/theme/dummy2.html（这个页面可以随意滚动，但不能居中）
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?
我只想让页面左侧内容滚动页面滚动条，但右侧内容保持在原始位置，加上整个网站应该居中对齐，即结合我的测试页面 1 和 2。谁能给我一些灯?
回答by NGLN
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.
尽管您的 Gizmodo 示例使用了额外的脚本来处理侧边栏（甚至不适用于所有浏览器）（的垂直滚动条），但使用纯 CSS 完全可以实现这种效果，而且它甚至没有看起来那么困难第一眼。
So you want:
所以你要：
- A horizontally centered layout, possibly widened or narrowed for different browser window sizes,
- The main content at the left which is vertically scrollable by the browser's main scroll bar,
- A sidebar at the right which sticks to the top of the browser window, scrollable separately from the main content, and only showing its scroll bar when the mouse hovers over. When scrolled to the end of the sidebar, the window's scroll bar takes over.
- 水平居中的布局，可能会因不同的浏览器窗口大小而加宽或变窄，
- 左侧的主要内容可通过浏览器的主滚动条垂直滚动，
- 右侧的侧边栏贴在浏览器窗口的顶部，可与主要内容分开滚动，并且仅在鼠标悬停时显示其滚动条。当滚动到侧边栏的末尾时，窗口的滚动条将接管。
See this demonstration fiddlewhich does all that.
请参阅此演示小提琴，它可以完成所有这些。
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 */
}
And the markup:
和标记：
<div class="wrapper">
<div id="content">
</div>
</div>
<div id="overlay">
<div class="wrapper">
<div id="sidebar">
</div>
</div>
</div>
Tested on Win7 in IE7, IE8, IE9, Opera 11.50, Safari 5.0.5, FF 5.0, Chrome 12.0.
在 IE7、IE8、IE9、Opera 11.50、Safari 5.0.5、FF 5.0、Chrome 12.0 的 Win7 上测试。
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 fiddlewhich makes the markup more simple.
我假设主要内容的宽度是流动的，侧边栏的宽度是静态的，但两者都可以完美地流动，如你所愿。如果您想要静态宽度，请参阅此演示小提琴，它使标记更简单。
Update
更新
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 fiddledoes what you want:
我认为这个新的演示小提琴可以满足您的需求：
<div id="wrapper">
<div id="content">
</div>
</div>
<div id="sidebar">
</div>
回答by AlienWebguy
I misunderstood your question. I thought you wanted the main scrollbar to also scroll stuff in another div. Well, here you go:
我误解了你的问题。我以为您希望主滚动条也滚动另一个 div 中的内容。好吧，给你：
$(function(){
$(document).scroll(function(){
$('#my_div').stop().animate({
scrollTop : $(this).scrollTop()
});
});
});
回答by Jakub Roztocil
You can do this with position:fixed. The relevant part from GIZMODO's stylesheet:
您可以使用position:fixed. GIZMODO 样式表中的相关部分：
#rightcontainer {
position: fixed;
margin-bottom: 10px;
width: 300px;
height: 100%;
top: 0;
}
回答by Ibu
This technique is seen on lots of websites today. What they do is give position: fixedto the div on the right side of the screen, so it is not affected by the page scroll.
今天在很多网站上都可以看到这种技术。他们所做的是给position: fixed屏幕右侧的div，所以它不受页面滚动的影响。
CSS:
CSS：
body {
position: relative;
}
#leftSide {
width: 600px;
...rules ...
}
#rightSide {
position: fixed;
left: 610px;
}
HTML:
HTML：
<body>
<div id="leftSide">
affected by scrolling
</div>
<div id="rightSide">
Not affected by scrolling
</div>
</body>
回答by martnu
I assume you are looking for something like this.
我假设你正在寻找这样的东西。
Please notice that you can alter the width of #main_contentas you wish, as long as it doesn't go "behind" your fixed menu as your text will disappear.
请注意，您可以根据需要更改宽度#main_content，只要它不会在您的固定菜单“后面”，因为您的文本将消失。
The trick to get the fixed menu to the right in your centered container is using left: 50%and margin-leftto adjust it correctly.
在居中的容器中将固定菜单放在右侧的技巧是使用left: 50%并margin-left正确调整它。
For example. You have a container-width of 960px, and fixed menu width of 300px, with left: 50%, there will be a white space of (960/2 - 300 = 180) to the right of the fixed menu. Then just adjust it with margin-left: 180px;
例如。您的container-width 为960px，固定菜单宽度为300px，left: 50%固定菜单右侧将有一个 (960/2 - 300 = 180) 的空白区域。然后只需调整它margin-left: 180px;
回答by William Niu
One way to "center" the page (i.e. content + right panel) is to adjust the margins while making the right panel fixed position. So, if you have a div#contentand a div#rightPanel, the css may look something like:
“居中”页面（即内容 + 右面板）的一种方法是在使右面板固定位置的同时调整边距。因此，如果您有 adiv#content和 a div#rightPanel，则 css 可能类似于：
#content {
margin-left: 15%; /* left page margin */
margin-right: 25%; /* right page margin + rightPanel's width */
}
#rightPanel {
position: fixed;
top: 0;
right: 15%; /* right page margin */
width: 10%;
}
Just make sure that the left margin of #contentis the same as the right margin of #rightPanel.
只需确保 的左边距#content与右边距相同#rightPanel。
Here's an example: http://jsfiddle.net/william/ZruS6/1/.
这是一个例子：http: //jsfiddle.net/william/ZruS6/1/。
