Custom library to handle scroll.
There is 3 main things that Smooth can take care of for you :
- Wrapping a container ( usually the page ) and adding a smooth scroll ( with some lerping/momemtum to it )
- This can be some by keeping the real scroll and scrollbar for a more native experience
- Or this can be done using virtual-scroll for a more smooth experience
- Handling Parallax
- Smooth will act as a controller to handle parallax
- Scroll Trigger, to reveal element when they reach a certain
The library works on mobile but I recommend to keep the real scroll on mobile.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Title</title>
</head>
<body>
<main id="content">
<section class="page-wrapper">...</section>
</main>
</body>
</html>
import Smooth from '@timroussilhe/smooth';
this.smooth = new Smooth({
scrollElement: document.querySelector('.scroll-wrapper'),
scrollOptions: {
useVirtualScroll: false,
smoothContainer: true,
easing: 0.12,
friction: null,
}
});
this.smooth.start();
const elementParallax = {
el: document.querySelector('.scroll-wrapper'),
parallax: [
{
start: 0,
end: 500,
properties: [['translateY', 0, 250]],
easing: 'easeInOutCubic',
viewFactorStart: 0,
viewFactorEnd: 0,
},
],
};
const $footer = document.querySelector('footer');
const elementTrigger = {
el: $footer,
trigger: {
start: 'in-viewport',
end: 'out-viewport',
viewFactorStart: 0,
viewFactorEnd: 0,
callback: (before) => {
if (before === 0) {
$footer.classList.add('footer--in');
} else if (before === -1) {
$footer.classList.remove('footer--in');
}
},
},
};
this.smooth.addElements([elementParallax, elementTrigger]);
this.smooth.reset(this.getScrollElement());
this.smooth.resize();
| property | type | default | description |
|---|---|---|---|
| scrollElement | DOM element | null | required DOM element for the Scroll wrapper |
| scrollbarElement | DOM element | null | optional DOM element for the Scrollbar container |
| scrollOptions | Object | {} | required Option for the Scroll |
| scrollbarOptions | Object | {} | optional Option for the Scroll |
| property | type | default | description |
|---|---|---|---|
| easing | number | 0.5 | easing value for the scroll |
| friction | number | 0.2 | friction value for the scroll |
| wheelDeltaMultiplier | number | 0.45 | Multiplier to add to the wheel delta |
| maxWheel | number | 400 | Max value that the wheel event delta can get to |
| autoUpdate | boolean | true | Let Scroll update its own requestanimationframe loop |
| useVirtualScroll | boolean | true | Use virtual-scroll or the native scroll |
| direction | string | vertical | Direction of the scroll, vertical or horizontal |
| infinite | boolean | false | Infinite scroll will not stop the Scroll when reaching the limit of the scroll Wrapper. |
| property | type | default | description |
|---|---|---|---|
| orientation | string | vertical | Orientation and placement of the scrollbar |
| minSize | number | 50 | Smallest size that the Scrollbar thumb can reach |
| fade | boolean | true | If the Scrollbar thumb need to fade or not |
| fadeTime | number | 1200 | Fade Timer duration |
| className | string | scrollbar-thumb | className of the generated Scrollbar |
| updateScrollTarget | function | null | Function to called when the Scrollbar get updated |
| property | type | description |
|---|---|---|
| el | DOM Element | Target element |
| trigger | Object | Trigger Item values |
| parallax | Array | Array of Parallax Item values |
| property | type | description |
|---|---|---|
| start | string | number | start value for the scroll element. This can be a number or use 'in-viewport' 'out-viewport' |
| end | string | number | end value for the scroll element. This can be a number or use 'in-viewport' 'out-viewport' |
| properties | array | Properties to animate, each property should be an array following this structure [property,valueStart,ValueEnd] ex: ['translateY', 0, 200] |
| viewFactorStart | string | number | factor to add to the start value, this can be a number that will be used as a factor of the element height or a fixed pixel value. Ex: 200px |
| viewFactorEnd | string | number | factor to add to the end value, this can be a number that will be used as a factor of the element height or a fixed pixel value. Ex: 200px |
| property | type | description |
|---|---|---|
| start | string | number | start value for the scroll element. This can be a number or use 'in-viewport' 'out-viewport' |
| end | string | number | end value for the scroll element. This can be a number or use 'in-viewport' 'out-viewport' |
| viewFactorStart | string | number | factor to add to the start value, this can be a number that will be used as a factor of the element height or a fixed pixel value. Ex: 200px |
| viewFactorEnd | string | number | factor to add to the end value, this can be a number that will be used as a factor of the element height or a fixed pixel value. Ex: 200px |
| callback | function (scrollPosition) => {} | callback function to be called when the trigger start or end scroll values are reached. scrollPosition is -1 for before, 0 for in, 1 for after. |
| repeat | boolean | Repeat the callback function after the first trigger in. |
| Method | Description |
|---|---|
| start | Start Smooth |
| addElements(elements) | Add Scroll Elements. Arguments: elements |
| reset(elements) | Reset Scroll Elements. Usually used on resize |
| disable | Disable Smooth |
| enable | Enable Smooth |
| scrollTo(target,direct) | Set Scroll Position. Arguments: target: scroll position. direct scroll to the target with no animation |
| resize(target) | Resize Smooth. Arguments: target: you can provide a fixed height but this is not necessary |
| destroy() | Destroy Smooth instance and clear events. |