stellar.js - 在JSFiddle很好，但在本地生涩？
[英]stellar.js - fine in JSFiddle but jerky locally?
问题描述
I have just started working with stellar.js (Parallax jQuery library), and it seems pretty easy to use, however it is really jerky/jumpy when you scroll with the mouse wheel (less so when you drag the browser scrollbar manually. Oddly, it is perfectly smooth when uploaded to JSFiddle . 
我刚刚开始使用stellar.js （Parallax jQuery库），它似乎很容易使用，但是当你用鼠标滚轮滚动时它真的很生涩/跳跃（当你手动拖动浏览器滚动条时不那么这样。奇怪的是， 上传到JSFiddle时非常流畅。
Has anyone encountered this issue before and know what the likely cause could be looking at my code? 有没有人以前遇到过这个问题，并且知道可能的原因是什么原因可以查看我的代码？ Please feel free to download the code from JSFiddle and recreate locally to see if you get the same issue, or if you spot anything obvious on my Fiddle, help would be appreciated. 请随意从JSFiddle下载代码并在本地重新创建以查看是否出现相同问题，或者如果您发现我的小提琴上有任何明显的问题，请帮助我们。
For reference, this problem occurs in Chrome (version 32 here). 作为参考，Chrome中会出现此问题（此处为版本32）。
CSS 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 的JavaScript / jQuery的
$(document).ready(function(){
$.stellar()
});
HTML 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>
2 个解决方案
解决方案1
1 已采纳 2014-01-14 10:21:15
I had this problem a month ago. 我一个月前遇到过这个问题。 I think it's ok in JSfiddle because the render window is small and it has a simple html code. 我认为它在JSfiddle中没问题，因为渲染窗口很小而且它有一个简单的html代码。
As the project I was working on needed to be really smooth / speed with a heavy HTML structure and lots of CSS animations, I had to do that effect from scratch with jQuery just with a simple $(window).scroll() and configuring the top property of my elements (position: absolute). 由于我正在研究的项目需要非常流畅/速度，具有沉重的HTML结构和大量的CSS动画，我必须使用简单的$(window).scroll()从头开始使用jQuery实现这一效果并配置我的元素的top属性（位置：绝对）。
解决方案2
1 2014-11-06 09:51:05
不知道是否仍然打开但可能有所帮助：添加：
background-attachment:fixed
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.