如何创建像duo.google.com这样的滚动效果？

Question

https://duo.google.com/
如你所见，它就像用画布滚动一样。

我找到了类似的方法来做到这一点 https://codyhouse.co/?p=634
不幸的是，它们并不相同，并且“背景附件：已修复;” 在移动设备中不起作用

我还尝试过使用z-index和位置设置。 但是，由于某些固定层无法覆盖，因此无法正常工作。

那么，我可以要求使用duo.google.com进行相同滚动效果的概念或参考吗？希望有人可以帮助我。

Answer 1

这可能与您想要做的有些接近。

Fiddle

为了使手机不会溢出到蓝色框，我们特别使用两个属性。

1. 在divs css规则container内分配所有position: relative;

2. 分配.red div，css规则overflow: hidden;