Smooth Scroll Snapping

In this article, we can take a look at how we can implement scroll snapping in your website with SCSS.

The HTML Code

Let's start with a default HTML, create an index.html file and if you are using VS code just press "!" and enter so that you get a basic HTML with head and body tags.

Next, create a container div to wrap 2 or more sections having content.

Now your code should look something like below,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
</head>
<body>
    <div class="container">
        <section>
            <h1>One.</h1>
        </section>
        <section>
            <h1>Two.</h1>
        </section>
        <section>
            <h1>Three.</h1>
        </section>
    </div>
</body>
</html>

Adding Styles to HTML

Our HTML is set up, now we can add basic styling as below to the HTML elements. You can change it as per your needs.

Note: I have used SCSS for the ease of CSS coding and I'm using
"Live Sass Compiler" extension in VS code to compile SCSS to CSS.

$section1-bg-color: #1c1c1c;
$section1-text-color: #f1f1f1;
$section2-bg-color: #262626;
$section2-text-color: #c3e991;
$section3-bg-color: #303030;
$section3-text-color: #51a3a3;

body {
    height: 100vh;
    margin: 0;

    .container {
        width: 100%;
        height: 100%;

        section {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;

            &:nth-of-type(1) {
                background-color: $section1-bg-color;
                color: $section1-text-color;
            }

            &:nth-of-type(2) {
                background-color: $section2-bg-color;
                color: $section2-text-color;
            }

            &:nth-of-type(3) {
                background-color: $section3-bg-color;
                color: $section3-text-color;
            }
        }
    }
}

CSS Classes for Scroll Snapping

Next, let's see the CSS properties to be added in the .container class to enable snap scrolling

scroll-snap-type - which describes the direction and snap points of the scroll container.
overflow-y or overflow-x - this property describes the direction of scroll choose overflow-y: scroll for a vertically scrolling website or overflow-x: scroll for horizontally scrolling site
scroll-behavior - to describe how the scroll should be done setting scroll-behavior: smooth should make scrolling on your site smooth.

Next, we can move on to the styling for section tag, here we should be adding the property

scroll-snap-align to set the snap position, which determines the position of the section at which snapping should take place while scrolling.

With these 4 CSS properties you have enabled the snap scrolling on your site.

Now your finished SCSS code should be,

$section1-bg-color: #1c1c1c;
$section1-text-color: #f1f1f1;
$section2-bg-color: #262626;
$section2-text-color: #c3e991;
$section3-bg-color: #303030;
$section3-text-color: #51a3a3;

body {
    height: 100vh;
    margin: 0;

    .container {
        width: 100%;
        height: 100%;
        scroll-snap-type: y mandatory;
        overflow-y: scroll;
        scroll-behavior: smooth;

        section {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            scroll-snap-align: start;

            &:nth-of-type(1) {
                background-color: $section1-bg-color;
                color: $section1-text-color;
            }

            &:nth-of-type(2) {
                background-color: $section2-bg-color;
                color: $section2-text-color;
            }

            &:nth-of-type(3) {
                background-color: $section3-bg-color;
                color: $section3-text-color;
            }
        }
    }
}

Voila! you have just added smooth scroll snapping to your website.

Smooth Scroll Snapping

The HTML Code

Adding Styles to HTML

CSS Classes for Scroll Snapping

Rahul

Leave a comment