Commit 2baa0559 authored by Daniel Kurowski's avatar Daniel Kurowski
Browse files

Moved to velocity-animate scrolling

parent 944c9e59
import smoothScroll from 'smoothscroll-polyfill';
import Velocity from 'velocity-animate';
// import smoothScroll from 'smoothscroll-polyfill';
/**
* As of version 62, Chrome started to support natively `behavior: smooth` in `scrollIntoView()` method.
......@@ -6,11 +7,18 @@ import smoothScroll from 'smoothscroll-polyfill';
* Thus we have to force the polyfill to behave as intended.
* Related: https://github.com/iamdustan/smoothscroll/issues/93
*/
window.__forceSmoothScrollPolyfill__ = true;
smoothScroll.polyfill();
// window.__forceSmoothScrollPolyfill__ = true;
// smoothScroll.polyfill();
export const handleInteraction = (documentObject) => {
export const handleInteraction = (windowObject, documentObject) => {
if ((typeof document.querySelector === 'undefined') || (typeof document.querySelectorAll === 'undefined')) {
return;
}
if (typeof document.addEventListener === 'undefined') {
return;
}
documentObject.addEventListener('DOMContentLoaded', () => {
const items = documentObject.querySelectorAll('a[href^="#"]');
......@@ -20,31 +28,63 @@ export const handleInteraction = (documentObject) => {
}
items[i].addEventListener('click', (e) => {
const hrefName = e.target.getAttribute('href').substr(1);
if (typeof e.currentTarget.getAttribute === 'undefined') {
return;
}
if (!hrefName) {
const hash = e.currentTarget.getAttribute('href');
if (!hash) {
return;
}
documentObject.querySelector('#' + hrefName).scrollIntoView({
behavior: 'smooth'
});
e.preventDefault();
e.stopPropagation();
scrollTo(hash, documentObject, windowObject);
});
}
});
};
export const handleLoad = (windowObject) => {
export const handleLoad = (windowObject, documentObject) => {
if (typeof document.querySelector === 'undefined') {
return;
}
if (typeof document.addEventListener === 'undefined') {
return;
}
if (typeof windowObject.location === 'undefined') {
return;
}
windowObject.addEventListener('load', () => { // The `load` event has been chosen intentionally as it is the only state when everything is loaded and the scroll will proceed correctly (it will slide to correct offset).
if (windowObject.location.hash) {
// First, we need to go to top immediately (hack to prevent jump to desired element).
windowObject.scroll({top: 0, left: 0});
// Then, scroll down to it smoothly.
document.querySelector(windowObject.location.hash).scrollIntoView({
behavior: 'smooth'
});
scrollTo(windowObject.location.hash, documentObject, windowObject);
}
});
};
const scrollTo = (hash, documentObject, windowObject) => {
const element = documentObject.querySelector(hash);
Velocity(element, 'scroll', {
duration: 1200, // @todo: different depending on offset from page top?
complete: () => {
windowObject.location.hash = hash;
}
});
/*
* @todo: Consider possibility of using Velocity or this native depending on offset from page top.
* Maybe the native one is better for shorter distances, Velocity is better for longer distances.
* Or maybe just work with the duration on Velocity would be better.
*/
// documentObject.querySelector('#' + hash).scrollIntoView({
// behavior: 'smooth'
// });
};
\ No newline at end of file
......@@ -4,9 +4,12 @@
"main": "index.js",
"private": true,
"dependencies": {
"smoothscroll-polyfill": "^0.4.3"
"smoothscroll-polyfill": "^0.4.3",
"velocity-animate": "^1.5.1"
},
"browserify": {
"transform": ["babelify"]
"transform": [
"babelify"
]
}
}
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment