IE와 firefox가 scroll()에서 location.hash를 예기치 않게 업데이트하는 동작을합니다.

Question

나는 긴 스크롤링 사이트에서 현재 div가 활성화되어 있는지 확인하여 location.hash를 업데이트하려고합니다. 이 작품 크롬,하지만 Firefox와 IE에서 실패합니다. console.log 및 으로 테스트했습니다. 콘솔에서 ID를 볼 수 있지만이 위치 해시로 피드를 보내 자마자 스크롤이 페이지에서 작동하지 않거나 예기치 않게 이동합니다!

$(window).scroll(function() { 
$('div').each(function(){ 
    if (
     $(this).attr('class')=='article' && $(this).offset().top < window.pageYOffset + 10 
    && $(this).offset().top + $(this).height() > window.pageYOffset + 10 
    ) { 
     window.location.hash = $(this).attr('id') 
    } 
}); 

}); 

Answer 1

먼저 스크롤 이벤트가 1 초에 여러 번 발생한다는 점을 이해해야합니다. DOM을 검색하는 데 사용하는 방법론을 결합하면 ... div을 찾은 다음 원하는 모든 항목에 대해 div을 필터링하고이 작업을 여러 번 반복하면 브라우저가 불필요하게 오버로드됩니다.

간단한 데모에서 창을 스크롤하고 스크립트가 실행되는 빈도를 확인하십시오. http://jsfiddle.net/tRx2P/

동일한 요소를 반복해서 DOM에서 검색하려는 경우 변수에 캐싱하면 성능이 크게 향상됩니다. DOM을 검색하면 훨씬 더 많은 비용이 정말 중요한 부분은 다시이 두 번째 체크해야하는 횟수를 스로틀해야 지금 요소

/* use jQuery selector that already filters out all the other `div` in page*/ 
var $articles= $('.article'); 
/* now use the variable inside your functions*/ 
$(window).scroll(function(){ 
    $articles.each(..... 
    /* use the same cache principles for "$(this)" to help avoid needless function calls*/ 
}) 

을 포함하는 캐시 변수를 검색하는 것보다입니다. 사용자가 여전히 스크롤하는 동안 해시를 여러 번 업데이트 할 때 이점이 없습니다. 브라우저에 과부하가 걸릴 수 있습니다.

이 수정 된 데모는 사용자가 300ms 동안 스크롤하지 않았을 때만 코드를 실행합니다 1/2 초 또는 그 이상으로 증가 될 수 있습니다. 그것은 지속적으로 타임 아웃 지연을 설정하여 http://jsfiddle.net/tRx2P/2/

이제 당신은, 미안 해요, 내가 대답을 수락했다는 것을 인식하지 않았다 지금