仅使用页面滚动条滚动div的左侧
[英]scroll left side of div only using page scroll bar
问题描述
Today I had a look on the foursquare.com website, when I search something in my city, it return me to the result page, and in the result page, when I scroll the page down using the page scroll bar, only the left column containing the listview of places detail scrolled down, not the right hand side of the page, I just want to know how that can be done using jquery or javascript. 
今天我在foursquare.com网站上看了一下，当我在我的城市搜索某些东西时，它返回到结果页面，在结果页面中，当我使用页面滚动条向下滚动页面时，只有左列包含滚动的地方详细列表视图，而不是页面的右侧，我只想知道如何使用jquery或javascript完成。 suppose I have the following html div: 假设我有以下html div：
<html><body>
<div id="wrapper" style="width:900px;height:1200px;margin: 0 auto;">
<div id="left_column" style="width:300px;height:1200px; float:left;border:1px solid #000000;">
<ul><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li><li>list 1</li></ul>
</div>
<div id="middle_column" style="width:300px;height:1200px; float:left;border:1px solid #000000;"></div>
<div id="right_colunm" style="width:300px;height:1200px; float:left;border:1px solid #000000;"></div>
</div>
</body></html>
when I using the page scroll bar, only the content in the left_column is scrolled, not the middle one and the right one, can any one show me how to do it in jquery. 当我使用页面滚动条时，只滚动left_column中的内容，而不是中间的和右边的内容，任何人都可以告诉我如何在jquery中执行此操作。 any help will be grately appreciated! 任何帮助将得到最好的赞赏！
2 个解决方案
解决方案1
2 2012-11-22 21:15:34
It's actually just CSS. 它实际上只是CSS。 The map in the background and header are set to position: fixed so that they stay in one place while the rest of the page scrolls. 背景和标题中的地图设置为position: fixed以便它们保持在一个位置，而页面的其余部分滚动。
解决方案2
0 已采纳 2012-11-22 22:09:08
Try this, without jquery 试试这个，没有jquery
<!DOCTYPE html>
<html>
<style type="text/css">
#left {
overflow: auto;
left: 0;
width: 149px;
border-right: 1px solid #000;
position: relative;
}
#right {
position: fixed;
top:0;
margin-left: 200px;
height: 100%;
float:left;
}
</style>
</head>
<body>
<div id="left">
<ul>
<li>Start</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>menu</li>
<li>End</li>
</ul>
</div>
<div id="right">
<div style="float:left">
<p>Content start</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content</p>
<p>Content end</p>
</div>
<div style="margin-left:10px;float:left">
<p>right start</p>
<p>right</p>
<p>right</p>
<p>right end</p>
</div>
</div>
</body>
</html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.