javascript - HTML5 : Hidden artificial horizontal scrolling

Question

我正在尝试实现一种颜色效果，它看起来像是在不能有滚动条的视口(viewport)区域中滑动的颜色。所以它看起来像是从一种颜色从左侧或右侧线性过渡到另一种颜色。为了说明(颜色 1 从右边被颜色 2 替换):

+----------+ +----------+ +----------+
|1111111112| |1111111222| |1111122222|
|1111111112| |1111111222| |1111122222|
|1111111112| |1111111222| |1111122222|
|1111111112| |1111111222| |1111122222|
|1111111112| |1111111222| |1111122222|
+----------+ +----------+ +----------+

---

之前为了尝试这个，我有一个比视口(viewport)大的 div (500%) 并且它有 5 个子 div(每个 20% 宽度)。然后我使用 jquery 滚动较大的视口(viewport)，结果滚动给出了我想要的颜色过渡的错觉。但是，我正在尝试对可变颜色进行类似的处理(用户可以输入颜色，然后选择是从左侧还是右侧输入)。因此，静态滚动设置将不再有效。我尝试了以下内容:

---

+-----+-----+-----+
|Left | View|Right|
|     |     |     |
| Area|Area |     |
|     |     |Area |
+-----+-----+-----+

---

View 区域是视口(viewport)的 100%，左右区域不存在。当用户选择一种颜色和要从中过渡的一侧时，我然后使用 jquery 将一个新的 div 插入到具有请求的背景颜色的容器中。我给它的 css 值是 {left: 100%}，将其放在右侧区域)或 {left: -100%}，将其放在左侧区域。但是，因为我的 View 区域占据了视口(viewport)宽度的 100%，所以 css 将我插入的任何内容都放在我的 View 区域下方。为了解决这个问题，我尝试了几种 css 组合，但都没有奏效。

#area-container {
overflow: hidden;
width: 100%;
height: 100%;
float: left;
position: relative;
}

.color-areas{
width: 100%;
height: 100%;
position: relative;
float: left;
display: inline-block;
}

有人愿意为这个动画提出替代方法或帮助我解决这个 css 问题吗？

编辑:Jsfiddle: https://jsfiddle.net/jm8j8ghh/6/

EDIT2:解决了。我所要做的就是让容器有一个相对位置和它里面的区域一个绝对位置。如此处的答案中所述:Prevent floated divs from wrapping to new line

最终 jsfiddle:https://jsfiddle.net/jm8j8ghh/7/

Answer 1

感觉真的很傻，就是这么简单:将内部容器位置更改为绝对位置，效果非常好!