페이지의 위치 변경 페이지 크기 변경

Question

페이지 스크롤에 scrollTo()을 사용하고 있습니다. 내가 발견 한 한 가지 문제는 브라우저의 크기를 조정할 때 페이지가 지정된 요소로 다시 스크롤하지 않지만 중간에 어딘가에 머물러 있기 때문에 페이지를 정렬하기 위해 '스크롤'버튼을 다시 클릭해야한다는 것입니다. 사용자가 브라우저의 크기를 조정할 때 페이지 정렬 방법이 있습니까?

내가 이것을 사용하여 시도 :

window.onresize = function() { 
    scrollToPosition(section[position]); 
} 

// position is variable which I declared above this event 

을하지만이 페이지의 시작이 오른쪽으로 이동 미친 스크롤합니다/정상하지 않은 정말 빨리 떠났다. 나는 그것이 브라우저 크기를 조정할 때마다 onresize 이벤트를 바인딩한다고 생각합니다.

내 문제에 대한 해결책이 있습니까

편집 :

이 jsFiddle이지만, 내가 아무것도 여기에 작동하지 않기 때문에 jsFiddle을 사용하는 방법을 모르는 것 같다 http://jsfiddle.net/52eRj/1/는

Answer 1

당신은 피할 수있다 resize 이벤트가 발생할 때마다 다음과 같이 코드를 작성하여 재실행 기능을 수행합니다. scrollToPosition 기능은 스크롤 할 때 1 초마다 실행됩니다.

var last = new Date().getTime(); 
var interval = 1000; // Set your own time. 
window.addEventListener('resize', function() { 
    var curr = new Date().getTime(); 
    if (curr - last > interval) { 
     last = curr; 
     scrollToPosition(section[position]); 
    } 
}); 

Answer 2

문제는 당신이 보통의 수동 크기 조정에서 100 번을 발사 할 수있는 모든 크기 조정 이벤트에 scrollToPosition 함수를 호출하는 것을 수 있습니다.

는이 같은 clearTimeout을 사용할 수 있습니다이를 방지하려면

$(window).resize(function() { 
    clearTimeout(resizeId); 
    resizeId = setTimeout(doneResizing, 500); 
}); 


function doneResizing() { 
    scrollToPosition(section[position]); 
} 

따라서 그 수십 또는 불필요한 전화의 수백을 피하는 윈도우가 크기 조정 중지 이후 doneResizing 기능은 500 밀리 초 후에 호출된다 이런 식으로, .