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

视觉效果如下：

出于某种原因，当我滚动div.right时，#scroll正在移动。我希望它始终浮动在#wrapper的边界。

这就是我现在所得到的：

这是jsfiddle：http://jsfiddle.net/b5fYH/

谢谢

修改

仅仅因为它不明显，它必须适用于移动设备。

Answer 1

您必须了解position: absolute和position: fixed之间的区别。

第一个意思是：将元素置于相对元素内的绝对位置，并保持在该位置（相对）。

第二种：将元素置于窗口（框架）内的绝对位置，无论发生什么，都将其保留在那里。

检查这个小提琴：http://jsfiddle.net/b5fYH/1/

Answer 2

问题在于overflow-x如何更改包装div宽度。

我找到的解决方案是：

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

1. 使用id wrapper-container
用新div包装整个事物

2. 然后添加以下CSS代码：

   #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 */
   }