I have been wanting to redo my portfolio, and one of the major things I wanted it to have was smooth scrolling. So, I created a super simple smooth-scrolling effect with no extra dependencies but react.
In this blog, we'll be creating that together. So, let's get right into it.
Run the following commands to set up a react app.
So essentially what we are trying to do is to simply translate a div in Y-direction with a delay. This div will hold the full SPA (Single Page Application), resulting in an all-out smooth scrolling effect.
In this set up the div with the ref
scrollingContainer will translate in Y-direction.
Notice that the div with a class of "parent" is set to
position: fixed. This is essential otherwise the children div will just translate up leaving the space empty down below.
By doing this we are basically letting the browser know that our whole app is a fixed container of "width=100%" and "height=100%", with no scroll and stuff.
Later on, we'll be setting the height of the <body> tag equal to the "
scrollingContainer div" and that will allow us to scroll.
On Scroll we'll translate the "
Don't worry if this doesn't make sense. Hopefully, the code will make it clearer.
Final File Structure
Create a file in
src/components/SmoothScroll/SmoothScroll.js and paste the code below.
Don't worry about the imports just yet. We'll be creating them shortly.
Let's break it down.
- useWindowSize() is a custom hook that returns the current innerWidth and innerHeight of the window.
- scrollingContainerRef is used to apply translateY property on the div, on the fly.
datais not a state because we don't want our react component re-rendering each time we scroll.
- This useEffect runs only if the
windowSizechanges (if the user resizes the browser).
setBodyHeightmakes the height property on <body> equal to the height of the "
scrollingContainerRefdiv". After passing "position: fixed" to the "parent div", this makes sure that we have enough room to scroll through the whole "
- This useEffect runs only once and calls the
smoothScrollingfunction runs recursively changing the translate property on the "
scrollingContainerRefdiv" whenever the user scroll.
Notice that we are calling the
smoothScrolling function through
window.requestAnimationFrame(**)**method tells the browser that you wish to perform an animation and requests that the browser calls a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.
Note: Your callback routine must itself call
requestAnimationFrame()again if you want to animate another frame at the next repaint.
requestAnimationFrame()is 1 shot.
Create a file in
src/components/SmoothScroll/SmoothScroll.css and paste the code below.
Create a file in src/hooks/useWindowSize.js and paste the code below
This is a pretty straightforward hook that listens to the event of window
resize and returns the latest
innerHeight of the window.
Create a file
src/components/Section/Section.js and paste the code below.
Create a file
src/components/Section/Section.css and paste the code below.
Just a react component to fill up some space in our scrolling Container
Thank you for reading!
Would love to hear your thought!