Question

我刚刚开始使用stellar.js（Parallax jQuery库），它似乎很容易使用，但是当您使用鼠标滚轮滚动时它实际上是生涩/跳跃（当您拖动浏览器时不那么手动滚动条。奇怪的是，uploaded to JSFiddle时它非常流畅。

之前有没有人遇到过这个问题，并且知道可能的原因是什么原因可能会影响我的代码？请随意从JSFiddle下载代码并在本地重新创建以查看是否出现同样的问题，或者如果您发现我的小提琴上有任何明显的问题，我们将不胜感激。

作为参考，此问题出现在Chrome（此处的第32版）中。

CSS

body { background: url(https://www.google.co.uk/images/srpr/logo11w.png) no-repeat; background-size: 100% ; }

    section.one { position: relative; border-bottom: 5px solid #000; }
    .one .div1 { background: #ccc; width: 200px; height:300px; position: absolute; top: 200px; overflow: hidden; }
    .one .div2 { background: #eee; width: 200px; height:200px; position: absolute; top: 100px; left: 100px; }
    .one .div3 { background: #aaa; width: 200px; height:200px; position: absolute; top: 100px; left: 150px; }

    section.two { position: relative; border-bottom: 5px solid #000; overflow: hidden; }
    .two .div1 { background: #ccc; width: 200px; height:300px; position: absolute; top: 200px; }
    .two .div2 { background: #eee; width: 200px; height:200px; position: absolute; top: 100px; left: 100px; }
    .two .div3 { background: #aaa; width: 200px; height:200px; position: absolute; top: 100px; left: 150px; }

的JavaScript / jQuery的

$(document).ready(function(){
    $.stellar()
});

HTML

<body data-stellar-background-ratio="0.1">
<section class="one">
    <div class="div1" data-stellar-ratio="1"></div>
    <div class="div2" data-stellar-ratio=".5"></div>
    <div class="div3" data-stellar-ratio=".3"></div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</section>
<section class="two">
    <div class="div1" data-stellar-ratio="1"></div>
    <div class="div2" data-stellar-ratio=".5"></div>
    <div class="div3" data-stellar-ratio=".3"></div>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
</section>

</body>

Answer 1

一个月前我遇到了这个问题。我觉得JSfiddle没问题，因为渲染窗口很小，而且它有一个简单的html代码。

由于我正在研究的项目需要非常流畅/速度，并且HTML结构很多，并且有很多CSS动画，所以我必须使用简单的$(window).scroll()从头开始使用jQuery并配置我的元素的top属性（position：absolute）。

Answer 2

不知道是否仍然开放但可能有所帮助：添加：

background-attachment:fixed

stellar.js - 在JSFiddle很好，但在本地生涩？

2 个答案: