[英]Parallax scrolling jumpy in safari ios
我正在使用视差功能,并且在所有浏览器(Safari浏览器)上都可以正常工作。
我一直在关注这篇文章,以查看我可能做错了什么,而且我认为将JavaScript直接绑定到滚动事件时,我写的JavaScript错误。
这可能是一个愚蠢的问题,但是如何在不绑定滚动事件的情况下开始视差滚动事件。 我希望图像随着用户滚动以不同的方向以不同的速度移动。
我的JS
function onScroll() {
window.requestAnimationFrame(parallax);
function parallax(){
var prlx_effect_1= +(window.pageYOffset *.55).toFixed(2); // .55 for slow | .7 good for fast
var prlx_str_1 = "translate3d(0, "+prlx_effect_1+"px, 0)";
jQ('.prlx-1').css({
"transform":prlx_str_1,
"-ms-transform":prlx_str_1,
"-webkit-transform":prlx_str_1
});
var prlx_effect_2= -(window.pageYOffset *.25 ).toFixed(2); // .2 for slow | .4 good for fast
var prlx_str_2 = "translate3d(0, "+prlx_effect_2+"px, 0)";
jQ('.prlx-2').css({
"transform":prlx_str_2,
"-ms-transform":prlx_str_2,
"-webkit-transform":prlx_str_2
});
window.requestAnimationFrame(parallax);
}
}
window.addEventListener("scroll", onScroll, false);
有什么建议么? 还是可能有其他原因导致视差仅在野生动物园中出现跳动?
首先,从Underscore添加此去抖动功能
// debounce is taken from _underscore.js
function debounce(func, wait, immediate) {
var timeout, args, context, timestamp, result;
return function() {
context = this;
args = arguments;
timestamp = new Date();
var later = function() {
var last = (new Date()) - timestamp;
if (last < wait) {
timeout = setTimeout(later, wait - last);
} else {
timeout = null;
if (!immediate) result = func.apply(context, args);
}
};
var callNow = immediate && !timeout;
if (!timeout) {
timeout = setTimeout(later, wait);
}
if (callNow) result = func.apply(context, args);
return result;
};
}
用户开始滚动时启动requestAnimationFrame循环,并在最后一次滚动事件发生后100毫秒使用标志将其终止。
var requesting = false;
var killRequesting = debounce(function () {
requesting = false;
}, 100);
function onScroll() {
if (!requesting) {
requesting = true;
requestAnimationFrame(parallax);
}
killRequesting();
}
现在,在视差函数中,请在再次调用自身之前检查标志。
function parallax() {
// your parallax code
if (requesting) {
requestAnimationFrame(parallax);
}
}
其次,您应该始终缓存jQuery选择器。
var $prlx1 = jQ('.prlx-1');
var $prlx2 = jQ('.prlx-2');
function parallax(){
var prlx_effect_1= +(window.pageYOffset *.55).toFixed(2); // .55 for slow | .7 good for fast
var prlx_str_1 = "translate3d(0, "+prlx_effect_1+"px, 0)";
$prlx1.css({
"transform":prlx_str_1,
"-ms-transform":prlx_str_1,
"-webkit-transform":prlx_str_1
});
var prlx_effect_2= -(window.pageYOffset *.25 ).toFixed(2); // .2 for slow | .4 good for fast
var prlx_str_2 = "translate3d(0, "+prlx_effect_2+"px, 0)";
$prlx2.css({
"transform":prlx_str_2,
"-ms-transform":prlx_str_2,
"-webkit-transform":prlx_str_2
});
if (requesting) {
window.requestAnimationFrame(parallax);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.