我正在尝试使用 window.onscroll 和 scrollTop 创建视差效果,但我一直遇到渲染问题,看起来我在渲染视口(viewport)后收到了 onscroll。如你所见from this example (附代码)盒子的移动不稳定且不稳定。
所有基于 WebKit 的浏览器和 FireFox 的行为都是相同的。
JavaScript
$(document).ready(function() {
$('.box').each(function() {
$(this).data('y', $(this).offset().top);
});
});
$(window).scroll(function() {
var scroll = $(this).scrollTop();
$('.box').each(function() {
var parallax = $(this).data('parallax');
if (parallax) {
var y = $(this).data('y');
var offset = (scroll - y) * parallax;
$(this).css('-webkit-transform', 'translateY(' + offset + 'px)');
}
});
});
标记
<div class="red box">Lorem ipsum dolor sit amet.</div>
<div class="green box" data-parallax="0.4">Consectetur adipiscing elit.</div>
<div class="blue box" data-parallax="0.3">Nam consectetur dolor.</div>
最佳答案
只是想知道是否值得使用预制轮子而不是“重新发明”轮子?
关于javascript - 视差效果渲染问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/5456615/