絕對定位和可滾動DIV

Question

我有這個棘手的CSS問題：我有這樣的HTML：

<div id="wrapper"> 
    <div class="left"></div> 

    <div id="scroll"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque faucibus volutpat turpis at iaculis. Proin at nisl leo. Morbi nec blandit leo? Pellentesque interdum nunc sed nisl rhoncus gravida. Nunc sollicitudin, mi sit amet porta mollis, metus erat ornare odio, eu accumsan mauris diam nec augue. Ut tincidunt dui at lorem consequat vitae consectetur sapien pharetra. Suspendisse potenti. Donec turpis enim, varius accumsan congue vitae, rhoncus ut justo. Curabitur tristique lobortis eros ut pharetra. Maecenas non condimentum justo. Integer tincidunt; velit quis auctor varius, magna lorem pharetra urna, eget pellentesque leo nibh at mi. Ut pretium bibendum dui vel venenatis. Proin vel sem vitae lacus tincidunt bibendum. Pellentesque blandit mauris sit amet mauris sollicitudin pretium. In molestie condimentum nisi placerat consequat. 
    </div> 

    <div class="right"></div> 
</div> 

有了這個CSS：

#wrapper { 
    position: relative; 
    display: block; 
    overflow-x: auto; 
    -webkit-overflow-scrolling: touch; 
    height: 47px; 
} 

#scroll { 
    position: relative; 
    height: 100%; 
    width: 10000px; 
} 

div.left, div.right { 
    position: absolute; 
    display: block; 
    background-color: rgba(255, 0, 0, 0.5); 
    width: 24px; 
    height: 100%; 
    z-index: 100; 
    top: 0; 
} 

div.left { 
    left: 0; 
} 

div.right { 
    right: 0; 
} 

和視覺結果是這樣的：

出於某種原因，當我滾動#scroll時，div.right正在移動。我希望它總是漂浮在#wrapper的邊界。

這是我得到現在：

這裏是的jsfiddle：http://jsfiddle.net/b5fYH/

謝謝

編輯

只是因爲它是不是很明顯，它必須在移動設備上工作。

Answer 1

您需要知道的position: absolute和position: fixed之間的區別。

第一種意思是：將元素置於相對元素內的絕對位置並保留在那個地方（相對）。

第二種：將元素置於絕對位置窗口（框架）並保持它在那裏，不管發生了什麼。

檢查此琴：http://jsfiddle.net/b5fYH/1/

Answer 2

問題是與溢出-X如何改變包裝DIV的寬度。

我找到的解決方案是：

演示：http://jsfiddle.net/5jWpG/

1. 包裹整個事情與標識包裝容器

2. 然後加入下面的CSS代碼一個新的div：

   #wrapper-container { 
       position: relative; 
   } 
   
   #wrapper { 
       position: static; /* or remove position relative from your code */ 
   } 
   
   div.left, div.right { 
       bottom: 16px; 
       height: auto; /* or remove height: 100% from your code */ 
   }