使用 Skrollr 滚动时向下移动 div 的正确方法？

Question

我正在使用这个很棒的 Skrollr 库：https://github.com/Prinzhorn/skrollr（滚动动画）

到目前为止，我的实现是这样的：

<div class="band2 landing">
    <div class="container">
        <div id="inside" style="position:relative;height:700px" data-0="margin-top:0px" data-1000="margin-top:800px">
            <img src="/static/images/snappie.png" width="280px">
            <img src="/static/images/iphonehand.png" width="400px" style="float:right;margin-top:50px" data-0="margin-right:0px;" data-150="margin-right:190px" data-300="margin-right:0px;">
        </div>
    </div><!-- end container -->
</div><!-- end band landing -->

基本上，当用户向下滚动时，我会将整个 "inside" div 向下移动。当用户滚动一定数量的像素时，我将上边距增加一定数量。

虽然这在技术上可行，但它会产生一些非常奇怪的滚动，正如您在测试站点上看到的那样：http://snappiesticker.pythonanywhere.com/splash

看看滚动条是如何颤动和摇晃的，滚动到黄色条是多么困难？

我觉得对这些像素值进行硬编码通常不是解决此问题的最佳方法，并且会分崩离析，尤其是在使用各种屏幕尺寸、浏览器等时。

正确的做法是什么？有 skrollr 专家吗？

Answer 1

而不是使用 margin-top, margin-right 等

尝试使用 transform:translate3d(0, 0, 0)。

前两个 0 是 x 和 y 坐标，应进行调整以匹配您设置的边距效果。第三个0是z坐标，应该是0。

这样一石二鸟。 transform:translate 属性对浏览器来说更容易处理，3d 启用硬件加速。希望这会为您解决问题。

使用 Skrollr 滚动时向下移动 div 的正确方法？

Correct way to move div downwards when scrolling with Skrollr?

skrollr