Niedawno postanowiłem rozwiązać ten problem w sytuacji, gdy jQuery nie wchodziło w grę, więc loguję tutaj moje rozwiązanie tylko dla potomności.
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()Funkcja używa ujawniających modułu Wzorzec przekazać identyfikator docelowy element do jej scrolling()funkcji, za pośrednictwem scroll.To('id'), którego ustawia wartości wykorzystywane przez scroller()funkcję.
Awaria
W scrolling():
el : docelowy obiekt DOMelPos: zwraca funkcję, poprzez elememtPosition()którą podaje pozycję elementu docelowego względem początku strony za każdym razem, gdy jest on wywoływany.duration : czas przejścia w milisekundach.increment : dzieli pozycję początkową elementu docelowego na 40 kroków.time : ustawia czas każdego kroku.prev: poprzednia pozycja elementu docelowego w scroller().E: utrzymuje pozycję elementu docelowego w scroller().
Właściwa praca jest wykonywana przez scroller()funkcję, która kontynuuje wywoływanie siebie (przez setTimeout()), dopóki element docelowy nie znajdzie się na górze strony lub strona nie może się już przewijać.
Za każdym razem, gdy scroller()jest wywoływana, sprawdza aktualną pozycję elementu docelowego (trzymanego w zmiennej E) i jeśli jest to > 1OR < -1i jeśli strona jest nadal przewijalna, przesuwa okno o incrementpiksele - w górę lub w dół w zależności od tego, czy Ejest to wartość dodatnia czy ujemna. Jeśli Enie ma > 1OR < -1lub E===, prevfunkcja zatrzymuje się. Dodałem tę DOMElement.scrollTo()metodę po zakończeniu, aby upewnić się, że element docelowy uderzył w górę okna (nie żebyś zauważył, że jest wychylony o ułamek piksela!).
ifOświadczenie na linii 2 scroller()sprawdza, czy strona jest przewijanie (w przypadkach, w których cel może być w kierunku dolnej części strony, a strona nie może przejść dalej) za sprawdzenie Eprzeciwko swojej poprzedniej pozycji ( prev).
Warunek trójskładnikowy poniżej tego zmniejsza incrementwartość Ezbliżając się do zera. Dzięki temu strona nie przeskakuje w jedną stronę, a następnie odbija się z powrotem i przeskakuje w drugą stronę, a następnie odbija się, by ponownie prześcignąć drugą stronę, w stylu ping-ponga, do nieskończoności i dalej.
Jeśli Twoja strona ma wysokość ponad 4000 pikseli, możesz chcieć zwiększyć wartości w pierwszym warunku wyrażenia trójskładnikowego (tutaj +/- 20) i / lub dzielnik, który ustawia incrementwartość (tutaj 40).
Zabawa z durationdzielnikiem, który ustawia incrementi wartościami w warunku trójskładnikowym, scroller()powinno pozwolić na dostosowanie funkcji do strony.