Example code for implementing fullpage.js full-screen scrolling effect with CSS

When I was studying CSS recently, I found that I could create a full-screen scrolling effect using only two CSS properties :

scroll-snap-type
scroll-snap-align

Using it, you can achieve the full-screen scrolling effect of fullpage.js . In fact, the theory of this full-screen scrolling effect is very simple, that is, use js to monitor the scrolling of the interface, and when the interface scrolls to a certain value, let the interface continue to scroll to the next screen, but! It is very troublesome to consider the compatibility issues caused by screen size.

The two properties mentioned today cannot replace fullpage.js for the following two reasons:

They have compatibility issues with browsers.
CSS properties cannot listen to events, and therefore cannot provide a callback function for when the animation is complete.

1. Compatibility

Currently, mainstream browsers already support these two CSS properties, so you can use them with confidence. If you need to be compatible with IE browser, please choose fullpage.js .

2. Use

The method of use is actually very simple. scroll-snap-type attribute is placed on the parent container of the container that needs full-screen scrolling , while scroll-snap-align needs to be placed on the full-screen scrolling container . There is no point in saying more. We can clearly know how to use these two CSS attributes by looking at the code directly.

The complete code of the entire webpage is very simple, just paste it 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>CSS scroll snap</title>
    <style>
      body {
        margin: 0;
      }

      .container {
        height: 100vh;
        overflow-y: scroll;
        /* Use the scroll-snap-type property on the parent container */
        scroll-snap-type: y mandatory;
      }

      section {
        padding: 112px;
        height: calc(100vh - 224px);
        color: white;
        /* Use the scroll-snap-align property on the container that needs to scroll */
        scroll-snap-align: start;
      }

      section:nth-of-type(1) {
        background-color: #60af15;
      }

      section:nth-of-type(2) {
        background-color: #158baf;
      }

      section:nth-of-type(3) {
        background-color: #af1581;
      }

      section h3 {
        font-size: 48px;
      }

      section p {
        font-size: 20px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <section>
        <h3>A subtitle lives here</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
          deleniti dignissimos ducimus expedita iure maxime qui rerum veniam
          voluptatibus. Accusamus as period assumenda atque consectetur
          consequuntur culpa cum deserunt dicta distinctio error excepturi fuga
          Isa iste magnam modi nobis, obcaecati, pariatur perspiciatis placeat
          quo quod reiciendis repudiandae saepe soluta tempora unde vel? Aliquam
          exercise is the main place to reflect the volume
          voluptatum. Ad at commodi culpa cumque debitis delectus dolorum, eius
          error and explicabo harum in ipsum iste labore laborum libero magni
          I don't know what it means to be a good person, but I do know that
          recusandae reprehenderit saepe similar liquid vero vitae voluptas
          voluptatem! Quibusdam.
        </p>
      </section>
      <section>
        <h3>A subtitle lives here</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
          deleniti dignissimos ducimus expedita iure maxime qui rerum veniam
          voluptatibus. Accusamus as period assumenda atque consectetur
          consequuntur culpa cum deserunt dicta distinctio error excepturi fuga
          Isa iste magnam modi nobis, obcaecati, pariatur perspiciatis placeat
          quo quod reiciendis repudiandae saepe soluta tempora unde vel? Aliquam
          exercise is the main place to reflect the volume
          voluptatum. Ad at commodi culpa cumque debitis delectus dolorum, eius
          error and explicabo harum in ipsum iste labore laborum libero magni
          I don't know what it means to be a good person, but I do know that
          recusandae reprehenderit saepe similar liquid vero vitae voluptas
          voluptatem! Quibusdam.
        </p>
      </section>
      <section>
        <h3>A subtitle lives here</h3>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus
          deleniti dignissimos ducimus expedita iure maxime qui rerum veniam
          voluptatibus. Accusamus as period assumenda atque consectetur
          consequuntur culpa cum deserunt dicta distinctio error excepturi fuga
          Isa iste magnam modi nobis, obcaecati, pariatur perspiciatis placeat
          quo quod reiciendis repudiandae saepe soluta tempora unde vel? Aliquam
          exercise is the main place to reflect the volume
          voluptatum. Ad at commodi culpa cumque debitis delectus dolorum, eius
          error and explicabo harum in ipsum iste labore laborum libero magni
          I don't know what it means to be a good person, but I do know that
          recusandae reprehenderit saepe similar liquid vero vitae voluptas
          voluptatem! Quibusdam.
        </p>
      </section>
    </div>
  </body>
</html>

You can see that the code is not complicated. Let’s focus on these two CSS properties.

3. scroll-snap-type

This CSS property has the following values:

none: When the visible viewport of this scroll container is scrolled, no processing is performed.

x : The scroll container only snaps to positions on its horizontal axis.
y : The scroll container only snaps to positions on its vertical axis.
block: The scroll container only snaps to snap positions on its block axis.
inline: The scroll container only snaps to snap positions on its inline axis.
both: The scroll container snaps to its position on both axes independently (potentially snapping to different elements on each axis).
mandatory : If the scroll container is scrolled, it will automatically scroll to the next container after exceeding the critical value.
proximity : If the scroll container is scrolled, it will not automatically scroll to the next container after exceeding the critical value.

What you need to pay attention to are the properties marked in bold above. Using mandatory means full-screen scrolling. When the scrolling exceeds a certain threshold, it will automatically scroll to the next screen. If it does not scroll over a certain threshold, it will rebound.

What is different about proximity is that after scrolling over a certain threshold, you can scroll normally (while mandatory goes directly to the next screen), and if you do not scroll over a certain threshold, it will rebound.

It is actually very simple to understand these two properties. Just modify the above code and experience it yourself.

Note: Use mandatory with caution if the height of the scroll container is already greater than the height of the screen , because it may make some content difficult to read due to forced scrolling.

4. scroll-snap-align

This CSS property has the following values:

none: The container will not snap to the corresponding axis defined on the parent container. start: The position where the container is captured is the starting part of the container. end: The position where the container is captured is the end of the container. center: The location where the container is captured is the middle part of the container.

A picture can clearly show the container positions represented by these attributes:

5. Final Thoughts

Because I have seen that most of the other properties of scroll-snap have serious compatibility issues , I will not go into detail here. If you are interested, you can go to CSS Scroll Snap to check it out directly. However, using the two properties above is actually enough.

Reference articles:

scroll-snap-align MDN

scroll-snap-type MDN

Practical CSS Scroll Snapping

This concludes this article about sample code for implementing fullpage.js full-screen scrolling effect with CSS. For more relevant CSS full-screen scrolling content, please search 123WORDPRESS.COM’s previous articles or continue browsing the following related articles. I hope you will support 123WORDPRESS.COM in the future!

<<: One line of code solves various IE compatibility issues (IE6-IE10)

>>: Apache Log4j2 reports a nuclear-level vulnerability and a quick fix