스크롤링 수직 시차

Question

나는 단순 수직 시차 (http://nikebetterworld.com과 유사)를 만들고 있습니다.

코드는 기술적으로 작동하지만 각 스크롤 후에 페인트에 지저분한 효과가 나타납니다. 자바 스크립트가 늦게 발생하는 것처럼 보입니다. 왜 그런가? 나는 스크립트에서 실제로 두드러지는 것을 볼 수 없다.

var getYPosition = function() { 
    if (typeof(window.pageYOffset) == 'number') { 
    return window.pageYOffset; 
    } else { 
    return document.documentElement.scrollTop; 
    }  
}; 

$(document).ready(function(){ 
    var sections = $(".section"); 
    $(window).scroll(function() { 
    var x = getYPosition(), 
    y = Math.floor(x/1600), 
    z = $(sections[y]).offset(); 
    $(sections[y]).css("background-position", "0 " + (getYPosition() - z.top)/2 + "px"); 
    }); 
}); 

Answer 1

이미지가 두 번 이동되고있는 것 같습니다 - 귀하가 먼저 브라우저 스크롤에 의해, 그리고 scroll() 처리기. 따라서 지터.

이미지에 position:fixed 또는 background-attachment:fixed을 사용하면 더 깨끗한 효과를 얻을 수 있습니다.이 방법은 브라우저 스크롤에 영향을받지 않지만 scroll() 처리기로 이동합니다. 더 이상 다른 효과와 하나의 효과가 없습니다. 그에 따라 scroll() 처리기를 수정해야합니다.

Answer 2

스크롤 콜백이 너무 자주 호출되는지 확인해야합니다. 이 경우, 당신은 rerenderings의 수를 제한하여 setInterval을 사용하여 시도 할 수 있습니다 :

http://ejohn.org/blog/learning-from-twitter/

var outerPane = $details.find(".details-pane-outer"), 
    didScroll = false; 

$(window).scroll(function() { 
    didScroll = true; 
}); 

setInterval(function() { 
    if (didScroll) { 
     didScroll = false; 
     // Check your page position and then 
     // Load in more results 
    } 
}, 250); //in miliseconds