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 -->

基本上我正在移动整个＆＃34;内部＆＃34;当用户向下滚动时向下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的方法是什么？

1 个答案: