What is the best method to determine when 20% of a "<section>" element is within the user's view?

Question

What is the best method to determine when 20% of a "<section>" element is within the user's view?

Looking at the layout, I have two sections that take up the entire page. My goal is to detect when the second section is 20% visible while scrolling, and then smoothly scroll to lock that section in place so it occupies the full space. This action should also apply to any additional sections that are added in the future.

(I am able to handle the smooth scrolling part myself).

Does anyone have any ideas on how I can achieve this functionality?

* {
    margin: 0;
    padding: 0;
}

#s1 {
  height: 100vh;
  background: red;
}

#s2 {
  height: 100vh;
  background: blue;
}

<section id="s1"></section>
<section id="s2"></section>

javascript html css

Answer 1

Answer №1

let mainSection = document.querySelector('section'),
    sectionHeight = mainSection.offsetHeight,
    lastScrollPosition = 0;
document.addEventListener("scroll", function() {
    let scrollPosition = window.pageYOffset || document.documentElement.scrollTop;

    if (scrollPosition > lastScrollPosition) { //on scroll down
        if (scrollPosition >= sectionHeight * 0.2 && scrollPosition < sectionHeight) { //if 20% of section2 is visible
            window.scrollTo(0, sectionHeight * 1); //scroll to section2
        } else if (scrollPosition >= sectionHeight * 1.2 && scrollPosition < 2 * sectionHeight) { //if 20% of section3 is visible
            window.scrollTo(0, sectionHeight * 2); //scroll to section3
        } else if (scrollPosition >= sectionHeight * 2.2) { //if 20% of section4 is visible
            window.scrollTo(0, sectionHeight * 3); //scroll to section4
        }
    }
    lastScrollPosition = scrollPosition <= 0 ? 0 : scrollPosition;
});

* {
    margin: 0;
    padding: 0;
}
html,body{
  scroll-behavior: smooth;
}
section{
  height: 100vh;
}
#s1 {
  background: red;
}
#s2 {
  background: blue;
}
#s3{
  background: yellow;
}
#s4{
  background:purple;
}

<section id="s1"></section>
<section id="s2"></section>
<section id="s3"></section>
<section id="s4"></section>

Answer 2

let mainSection = document.querySelector('section'),
    sectionHeight = mainSection.offsetHeight,
    lastScrollPosition = 0;
document.addEventListener("scroll", function() {
    let scrollPosition = window.pageYOffset || document.documentElement.scrollTop;

    if (scrollPosition > lastScrollPosition) { //on scroll down
        if (scrollPosition >= sectionHeight * 0.2 && scrollPosition < sectionHeight) { //if 20% of section2 is visible
            window.scrollTo(0, sectionHeight * 1); //scroll to section2
        } else if (scrollPosition >= sectionHeight * 1.2 && scrollPosition < 2 * sectionHeight) { //if 20% of section3 is visible
            window.scrollTo(0, sectionHeight * 2); //scroll to section3
        } else if (scrollPosition >= sectionHeight * 2.2) { //if 20% of section4 is visible
            window.scrollTo(0, sectionHeight * 3); //scroll to section4
        }
    }
    lastScrollPosition = scrollPosition <= 0 ? 0 : scrollPosition;
});

* {
    margin: 0;
    padding: 0;
}
html,body{
  scroll-behavior: smooth;
}
section{
  height: 100vh;
}
#s1 {
  background: red;
}
#s2 {
  background: blue;
}
#s3{
  background: yellow;
}
#s4{
  background:purple;
}

<section id="s1"></section>
<section id="s2"></section>
<section id="s3"></section>
<section id="s4"></section>

What is the best method to determine when 20% of a "<section>" element is within the user's view?

Answer №1

Similar questions

Encountering an issue while trying to utilize the firestorePlugin from vuefire in Vuejs 3 createApp. The problem is that I am receiving an Uncaught TypeError: Cannot set property '$

What are the steps to configure ESlint and Prettier with the Airbnb style guide for a React Native/JavaScript project (Expo) in VS Code?

Is it possible to make the li elements within my ul list display on multiple lines to be more responsive?

Utilize a standard PHP script for every subdirectory within a domain

Press on the row using jQuery

A JavaScript function that produces an array as an output

In the XHTML mode, MathOverflow's invaluable mathematical expertise shines brightly

Problem with loading image from local path in Angular 7

What is the process for embedding HTML and CSS content into an Outlook email?

Steps to establish a connection with a remote MYSQL database using the actual IP address in Node.js

What is the best method for creating an HTML table using a Javascript function in PHP?

Submitting HTML form data to a Java class via JavaScript, following validation with JavaScript within a JSP file

Retrieving the output of an asynchronous function within another function in JavaScript

Implementing a validator based on the operator selection in react-querybuilder

How can CSS Bootstrap flex width be used to prevent parent element from expanding too much with long, single line text? Utilizing ell

What is the reason for using a string as the index of an array in the following code?

Displaying data in an HTML table using PHP and adding a popup

Can access parent refs when exporting a child component with withStyles by following these steps:

Guide on implementing a template within a form using Vue.js

Remove any nulls or undefined values from the object