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();
Smooth Properties/Options
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
Scroll Properties/Options
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.
Scrollbar Properties/Options
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.
