只使用頁面滾動條滾動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的左側

回答

相關問題