【发布时间】：2014-01-14 10:14:03
【问题描述】：
我刚刚开始使用stellar.js（Parallax jQuery 库），它看起来很容易使用，但是当你用鼠标滚轮滚动时它真的很生涩/跳跃（当你手动拖动浏览器滚动条时更少. 奇怪的是，uploaded to JSFiddle 的时候非常流畅。
之前有没有人遇到过这个问题，并且知道查看我的代码的可能原因是什么？请随时从JSFiddle 下载代码并在本地重新创建以查看您是否遇到相同的问题，或者如果您在我的 Fiddle 上发现任何明显的问题，我们将不胜感激。
供参考，这个问题出现在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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </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> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</section>
</body>
【问题讨论】：
-
我有类似的背景生涩问题，但仅限于 IE (link)
标签： jquery html css jsfiddle stellar.js