2011-04-27 11 views
0

내 웹 사이트에서 사용자가 다음 div (클래스 "게시")로 이동할 수있는 키보드 컨트롤과 이전 div까지 구현할 수 있습니다. 키보드 화살표 키.자바 스크립트로 다음 요소로 스크롤

나는 단지 keypress에 함수를 바인드 할 수있다. javascript (jquery를 사용)에서 div가 다음/이전인지 결정하는 데 도움이 필요하다.

사용자가 표준 스크롤 막대를 사용하여 화면을 중간까지 스크롤하면 다음 항목은보기 창의 상단을 기준으로 다음 항목이되므로 다음/이전 div를 계산할 필요가 있다는 것을 알고 있어야합니다. 사용자의 현재 스크롤 위치 ..하지만 난 조금 잃어 버렸어.

답변

1

먼저, 현재 스크롤 막대 위치를 $(document).scrollTop()으로 테스트해야합니다.

일단 이것을 사용하면 $(".post").each()을 사용하여 요소를 반복 할 수 있으며 상단 오프셋과 스크롤 막대 위치를 비교할 수 있습니다. 스크롤바보다 낮 으면 다음 요소가되므로 return false으로 루프 밖으로 나옵니다.

전체 예 :

var scrollPosition = $(document).scrollTop(), 
    nextPost = 0, 
    currentPosition = 0; 
$(".post").each(function() { 
    currentPosition = $(this).offset().top; 
    if (currentPosition > scrollPosition) { 
     nextPost = currentPosition; 
     return false; // break the loop 
    } 
}); 
$(document).scrollTop(nextPost); // Scrolls the page to the post 
관련 문제