Modern and the sweet smooth scroll library.
Introduce sweet-scroll.js features.
sweet-scroll.js is you can start using the very very simple.
$ npm install sweet-scroll
import SweetScroll from 'sweet-scroll';
document.addEventListener('DOMContentLoaded', () => {
const sweetScroll = new SweetScroll({ /* some options */ });
}, false);
Please detailed document viewed in GitHub.
The following options are applied by default. It can be customized as needed.
{
trigger: '[data-scroll]', // Selector for trigger (must be a valid css selector)
header: '[data-scroll-header]', // Selector or Element for fixed header (Selector of must be a valid css selector)
duration: 1000, // Specifies animation duration in integer
easing: 'easeOutQuint', // Specifies the pattern of easing
offset: 0, // Specifies the value to offset the scroll position in pixels
vertical: true, // Enable the vertical scroll
horizontal: false, // Enable the horizontal scroll
cancellable: true, // When fired wheel or touchstart events to stop scrolling
updateURL: false, // Update the URL hash on after scroll (true | false | 'push' | 'replace')
preventDefault: true, // Cancels the container element click event
stopPropagation: true, // Prevents further propagation of the container element click event in the bubbling phase
// Callbacks
before: null,
after: null,
cancel: null,
complete: null,
step: null,
}
Have prepared a sample that can try a characteristic feature of sweet-scroll.js.
copyright © sweet-scroll.js all right reserved.
sweet-scroll.js licensed under MIT.