You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
38 lines
1.1 KiB
38 lines
1.1 KiB
5 years ago
|
import raf from 'raf';
|
||
|
import getScroll from './getScroll';
|
||
|
import { easeInOutCubic } from './easings';
|
||
|
|
||
|
// interface ScrollToOptions {
|
||
|
// /** Scroll container, default as window */
|
||
|
// getContainer?: () => HTMLElement | Window;
|
||
|
// /** Scroll end callback */
|
||
|
// callback?: () => any;
|
||
|
// /** Animation duration, default as 450 */
|
||
|
// duration?: number;
|
||
|
// }
|
||
|
|
||
|
export default function scrollTo(y, options = {}) {
|
||
|
const { getContainer = () => window, callback, duration = 450 } = options;
|
||
|
|
||
|
const container = getContainer();
|
||
|
const scrollTop = getScroll(container, true);
|
||
|
const startTime = Date.now();
|
||
|
|
||
|
const frameFunc = () => {
|
||
|
const timestamp = Date.now();
|
||
|
const time = timestamp - startTime;
|
||
|
const nextScrollTop = easeInOutCubic(time > duration ? duration : time, scrollTop, y, duration);
|
||
|
if (container === window) {
|
||
|
window.scrollTo(window.pageXOffset, nextScrollTop);
|
||
|
} else {
|
||
|
container.scrollTop = nextScrollTop;
|
||
|
}
|
||
|
if (time < duration) {
|
||
|
raf(frameFunc);
|
||
|
} else if (typeof callback === 'function') {
|
||
|
callback();
|
||
|
}
|
||
|
};
|
||
|
raf(frameFunc);
|
||
|
}
|