任何人都可以帮我找出为什么这个页面在FireFox和Safari中看起来很好 但是在Chrome和IE浏览器中看起来它几乎没有恼人的跳帧。
我正在使用0延迟的动画移动<部分>向上或向下取决于滚动,所以它看起来像一个部分吃掉前一个是一种视差但不仅是背景而是整个部分。
http://bksn.mx/tequilaarsenal/public/index/arsenal
我的javascript代码评论是西班牙语,但如果需要,我很乐意翻译。
以下是执行此操作的JavaScript代码的简短示例
tempScrollTop=0;
$(window).scroll(function(e) {
windowTop = $(window).scrollTop();
scrollDiff = tempScrollTop-windowTop;
$("#sectionToMove").parallaxMio(p0,scrollDiff);
tempScrollTop = windowTop;
});
$.fn.parallaxMio = function(pInicial,scrollDiff){
if (scrollDiff < 0 ){
//scroll down
$(this).stop().animate({ top: '+='+scrollDiff }, 0);
else if (scrollDiff > 0){
//scroll up
$(this).stop().animate({ top: '+='+scrollDiff }, 0);
}
};
答案 0 :(得分:1)
您可以使用以下内容:
$(window).scroll(function(evt) {
var e = window.event || evt
var scrollDiff = e.detail?e.detail*(-120):e.wheelDelta;
$("#sectionToMove").parallaxMio(p0,scrollDiff);
});
FF中存在 e.wheelDelta
,而e.detail
位于其余部分,并告诉您滚动的方向和数量。此外e.wheelDelta
大部分时间都是e.detail * (-120)
。
P.S。作为建议尝试声明你的私有变量(例如scrollDiff
),因为你将“污染”你的全局空间,并且会在某个时刻“想知道为什么这个变量存在于窗口中”,以及“为什么我的使用相同变量名称的函数无法正常工作“。
编辑: