저는 최근에 jQuery가 옵션이 아닌 상황에서이 문제를 해결하기로 착수 했으므로 후대를 위해 여기에 솔루션을 기록하고 있습니다.
var scroll = (function() {
var elementPosition = function(a) {
return function() {
return a.getBoundingClientRect().top;
};
};
var scrolling = function( elementID ) {
var el = document.getElementById( elementID ),
elPos = elementPosition( el ),
duration = 400,
increment = Math.round( Math.abs( elPos() )/40 ),
time = Math.round( duration/increment ),
prev = 0,
E;
function scroller() {
E = elPos();
if (E === prev) {
return;
} else {
prev = E;
}
increment = (E > -20 && E < 20) ? ((E > - 5 && E < 5) ? 1 : 5) : increment;
if (E > 1 || E < -1) {
if (E < 0) {
window.scrollBy( 0,-increment );
} else {
window.scrollBy( 0,increment );
}
setTimeout(scroller, time);
} else {
el.scrollTo( 0,0 );
}
}
scroller();
};
return {
To: scrolling
}
})();
scroll.To('elementID');
scroll()함수는 사용 밝히려 모듈 패턴 의 상기 대상 소자의 ID를 전달 scrolling()통해 함수 scroll.To('id')에 의해 사용되는 값으로 설정하는 scroller()기능.
고장
에서 scrolling():
el : 대상 DOM 객체elPos: elememtPosition()호출 될 때마다 페이지 상단을 기준으로 대상 요소의 위치를 제공 하는 함수를 반환합니다 .duration : 전환 시간 (밀리 초).increment : 대상 요소의 시작 위치를 40 단계로 나눕니다.time : 각 단계의 타이밍을 설정합니다.prev:에서 대상 요소의 이전 위치 scroller().E:에서 대상 요소의 위치를 유지합니다 scroller().
실제 작업은 대상 요소가 페이지의 맨 위에 있거나 페이지가 더 이상 스크롤 할 수 없을 때까지 scroller()계속 자신을 호출 하는 함수 (를 통해 setTimeout())에 의해 수행됩니다 .
scroller()호출 될 때마다 대상 요소의 현재 위치 (variable에 유지됨 E)를 확인하고 그것이 > 1OR < -1이고 페이지가 여전히 스크롤 가능한 경우 창을 increment픽셀 단위 로 이동합니다 ( E양수 또는 음수 값에 따라 위 또는 아래로) . 경우 E인도 > 1OR < -1또는 E=== prev기능이 정지한다. DOMElement.scrollTo()대상 요소가 창의 맨 위에 있는지 확인하기 위해 완료시 메서드를 추가했습니다 (픽셀의 일부만 표시되는 것은 아닙니다!).
if2 행 의 명령문 은 이전 위치 ( )를 scroller()확인하여 페이지가 스크롤 중인지 확인합니다 (대상이 페이지 하단을 향하고 페이지가 더 이상 스크롤 할 수없는 경우 ). Eprev
그 아래의 삼항 조건 은 0에 가까워 지면 increment값을 줄 E입니다. 이렇게하면 페이지가 한 방향으로 오버 슈팅 한 다음 다시 바운스되어 다른 쪽을 오버 슈트 한 다음 다시 바운스되어 다른 쪽을 오버 슈트, 핑퐁 스타일, 무한대 및 그 이상으로 중지됩니다.
페이지가 c.4000px 이상인 경우 삼항 표현식의 첫 번째 조건 (여기서는 +/- 20) 및 / 또는 increment값 을 설정하는 제수 (여기서는 40) 의 값을 늘릴 수 있습니다 .
에 대해 재생 duration, 세트 제수 increment의 삼항 조건, 그리고 값이 scroller()맞춤 당신을 허용해야하는 기능은 페이지를 이용할 수 있습니다.