Smooth Scroll Move
Smooth Scroll Move will make your web more smooth to scroll to enhance user experience DEMO
How to install
go to your terminal and type the following:
yarn add smooth-scroll-move
then
How to use:
Full Page Scroll Smoothly
/*I am fixed UI Component, should put outside the smooth-scroll-move*/ /* all your web content here */
Wrap all your web content in id='smooth-scroll-move',
BUT
fixed UI component should put outside the id='smooth-scroll-move'
Here, you will have your web whole page scroll smoothly!!
Parallex Scroll Effect
If you want some UI Component have parallex scroll effect, just:
/*I am fixed UI Component, should put outside the smooth-scroll-move*/
give it a class: smc (scroll move component)
AND
dataset (can be multi):
Here, the parallex scroll effect will appear!!
PS:
-
If you just want parallex effect without whole page scroll smoothly, just make full_page: false
-
if your content will dynamic change cause different content height,
just use the function below to set new height to body after every time content has been changed:
const set_moving_board_height_to_body = { const BoxRef = documentchildren0 documentbodystyleheight = `px`}
- In Mobile Device, the scroll behavior is already smooth, so
the effect of Full Page Scroll Smoothly will be closed
in condition: window.innerWidth <= 1024