Question

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

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

为了在此之前尝试此操作，我有一个大于视口（500％）的div，它有5个子div（每个宽度为20％）。然后我使用jquery滚动较大的视口，结果滚动给出了我想要的颜色过渡的错觉。但是，我尝试使用可变颜色进行类似的处理（用户可以输入颜色，然后选择是否从左侧或右侧进入）。因此静态滚动设置将不再起作用。我尝试过以下内容：

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

“视图”区域是视口的100％，左侧和右侧区域不存在。当用户选择颜色和从中转换的边时，我然后使用jquery将新div插入具有所请求背景颜色的容器中。我给它的css值为{left：100％}，将其置于右侧区域）或{left：-100％}，将其置于左侧区域。但是，因为我的视区占据了视口宽度的100％，所以css会放置我在观察区域下方插入的内容。为了解决这个问题，我尝试了几种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;
}

是否有人愿意为此动画提出替代方法或帮助我解决此问题？

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

EDIT2：解决了它。我所要做的就是让容器具有相对位置，并且其内部区域是绝对位置。正如在这里的答案中所讨论的那样：Prevent floated divs from wrapping to new line

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

Answer 1

感觉真的很傻就是这么简单：将内部容器位置改为绝对位置，它就像一个魅力！

HTML5：隐藏人工水平滚动

1 个答案: