绝对定位和可滚动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 */ 
   }