가장 가까운 미리 정의 된 위치로 "스냅"할 수 있습니까?

Question

본질적으로 네 개의 div 인 웹 사이트가 있습니다. 각 웹 사이트 높이는 전체 문서 크기가 창 높이의 4 배가되도록 설정되어 있습니다. 아이디어는 사업부에서 클릭 한 "창 높이"로 스크롤을 진행한다는 것입니다

는

- 다음과 같이 작동합니다 : 그러나, 페이지 수동으로 사용자가 스크롤 한 후

// on click event 

if(cur_frame<number_slides){ 
    scrolling = true; 
    $('html,body').animate({scrollTop:window_height*cur_frame},function(){ 
     scrolling=false; 
    }); 
} 

, 나는 좋겠 위치를 가장 가까운 배수의 창 높이에 "맞추기"를 원합니다. 그래서 주어진 div가 다시 화면의 중앙에 오게됩니다. 나는 ... 약간의 지연이 천 배를 두 번째 트리거에서 계속 것이라고

// on scroll event 

clearTimeout(scroll_timer); 
if(!scrolling) scroll_timer = setTimeout(function(){ 
    if(cur_scroll!=window_height*(cur_frame-1)) { 
     scrolling = true; 
     $('html,body').stop().animate({scrollTop:window_height*(cur_frame-1)},function(){ 
     scrolling = false; 
     }); 
    } 
},100); //20? 400? 1000? 

을 파악, 타임 아웃을 사용하여 시도 ...하지만 스크롤 위치를 통해 사용자 싸움 스크립트 사이의 균형을 공격 할 수 없었다 , 또는 "물어 뜯기"효과를 저지르는 심각한 지연이 있습니다.

어떻게 달성 될지 제안 해주세요.

Answer 1

가 이것에 대한 CSS 사양이며, 그것을 잘 네이티브 렌더링 및 아주 좋은 터치 동작 크롬을 제외하고 지원됩니다 : https://github.com/ckrack/scrollsnap-polyfill

다음 느림보 브라우저를 http://caniuse.com/#feat=css-snappoints

는 polypill있다 네이티브 CSS 스크롤 스냅 SP의 자바 스크립트를 다시 구현 크로스 브라우저를 고려할 경우

도 How to emulate CSS Scroll Snap Points in Chrome?

Answer 2

자바 스크립트를 사용하거나 페이지 앵커를 사용할 수있는 좀 더 간단하고 오래된 솔루션 일 수 있습니다. document.location.hash를 페이지에있는 앵커로 변경하면 브라우저가 해당 위치로 스크롤합니다. 그래서 당신의 HTML에서 페이지의 일부 앵커를 넣어 : 당신의 js에서 다음

<a name="anchor1" id="anchor1"></a> 

넣어 : 이것에 대한

document.location.hash = "anchor1"; 

Answer 3

JQuery와 scrollsnap 플러그인은 IE9까지 지원합니다.

당신이 찾고있는 것을 "스크롤 스냅"이라고합니다.

<script src="demo/foundation/javascripts/jquery.js"></script> 
<script src="src/jquery.event.special.js"></script> 
<script src="src/jquery.easing.min.js"></script> 
<script src="src/jquery.scrollsnap.js"></script> 
<script type="text/javascript"> 
$(document).ready(function() { 
    $(document).scrollsnap({ 
     snaps: '.snap', 
     proximity: 50 
    }); 
}); 
</script> 

Answer 4

를 참조하십시오 EC는 이미 여기에 대답 How to emulate CSS Scroll Snap Points in Chrome?, 당신은 this library 사용할 수 있습니다

이

주된 이유는 대신 기본 CSS 용액이 사용하도록 모든 현대적인 브라우저에서 작동 및 사용자 정의 타이밍을 허용하는 사용자 정의 구성을 가지고있다 전환 및 스크롤 감지에서.

라이브러리 재 구현 CSS 함수 완화 스크립트 바닐라를 사용하여 기능을 끼워, 상기 용기 요소의 scrollTop/scrollLeft 속성 값과 스크롤 이벤트 리스너 여기

를 사용하여 작동하는 방법을 보여주는 예제이다 그것을 사용하려면 :