只使用页面滚动条滚动div的左侧

今天我浏览了foursquare.com网站，当我在我的城市搜索某些内容时，它将我返回到结果页面，并在结果页面中滚动页面时使用页面滚动条向下滚动，只有包含位置细节列表视图的左列向下滚动，而不是页面的右侧，我只想知道如何使用jquery或javascript来完成。假设我有以下的HTML DIV：只使用页面滚动条滚动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>

时使用的页面滚动条我

，只有在left_column滚动内容时，没有中间的一个，右边一个，任何一个可以告诉我怎么做它在jQuery中。任何帮助将不胜感激！

来源

2012-11-22 smith

试试这个，没有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>

来源

2012-11-22 22:09:08 adcosta

它实际上只是CSS。背景和标题中的地图设置为position: fixed，以便它们保持在一个位置，而其余的页面滚动。

来源

2012-11-22 21:15:34 freejosh

只使用页面滚动条滚动div的左侧

回答

相关问题