// @flow /** * Implements scroll to animation with momentum effect * * @see http://ariya.ofilabs.com/2013/11/javascript-kinetic-scrolling-part-2.html */ const TIME_CONSTANT = 100; // higher numbers - slower animation const SCROLL_ANCHOR_OFFSET = 80; // 50 + 30 (header height + some spacing) // Первый скролл выполняется сразу после загрузки страницы, так что чтобы снизить // нагрузку на рендеринг мы откладываем первый скрол на 200ms let isFirstScroll = true; let scrollJob = null; export function scrollTo(y: number) { if (scrollJob) { // we already scrolling, so simply change the coordinates we are scrolling to if (scrollJob.hasAmplitude) { const delta = y - scrollJob.y; scrollJob.amplitude += delta; } scrollJob.y = y; return; } const start = Date.now(); let scrollWasTouched = false; scrollJob = { // NOTE: we may use some sort of debounce to wait till we catch all the // scroll requests after app state changes, but the way with hasAmplitude // seems to be more reliable hasAmplitude: false, start, y, amplitude: 0 }; requestAnimationFrame(() => { // wrap in requestAnimationFrame to optimize initial reading of scrollTop if (!scrollJob) { return; } const y = normalizeScrollPosition(scrollJob.y); scrollJob.hasAmplitude = true; scrollJob.y = y; scrollJob.amplitude = y - getScrollTop(); (function animateScroll() { if (!scrollJob) { return; } const { start, y, amplitude } = scrollJob; const elapsed = Date.now() - start; let delta = -amplitude * Math.exp(-elapsed / TIME_CONSTANT); if (Math.abs(delta) > 0.5 && !scrollWasTouched) { requestAnimationFrame(animateScroll); } else { // the last animation frame delta = 0; scrollJob = null; document.removeEventListener('mousewheel', markScrollTouched); document.removeEventListener('touchstart', markScrollTouched); } if (scrollWasTouched) { // block any animation visualisation in case, when user touched scroll return; } const newScrollTop = y + delta; window.scrollTo(0, newScrollTop); }()); }); document.addEventListener('mousewheel', markScrollTouched); document.addEventListener('touchstart', markScrollTouched); function markScrollTouched() { scrollWasTouched = true; } } /** * Ensures, that `y` is the coordinate, that can be physically scrolled to * * @param {number} y * * @return {number} */ function normalizeScrollPosition(y: number): number { const contentHeight = (document.documentElement && document.documentElement.scrollHeight) || 0; const windowHeight: number = window.innerHeight; const maxY = contentHeight - windowHeight; return Math.min(y, maxY); } /** * Scrolls to page's top or #anchor link, if any * * @param {?HTMLElement} targetEl - the element to scroll to */ export function restoreScroll(targetEl: ?HTMLElement = null) { const {hash} = location; setTimeout(() => { isFirstScroll = false; const id = hash.replace('#', ''); const el = id ? document.getElementById(id) : targetEl; const viewPort = document.body; if (!viewPort) { console.log('Can not find viewPort element'); // eslint-disable-line return; } let y = 0; if (el) { const {top} = el.getBoundingClientRect(); y = getScrollTop() + top - SCROLL_ANCHOR_OFFSET; } scrollTo(y); }, isFirstScroll ? 200 : 0); } /** * http://stackoverflow.com/a/3464890/5184751 * * @return {number} */ export function getScrollTop(): number { const doc = document.documentElement; if (doc) { return (window.pageYOffset || doc.scrollTop) - (doc.clientTop || 0); } return 0; }