Is there a way to run a function if the user of my webpage hits a certain point on it?-CodePudding

I try do a webite with different divs or for me they are sections. If I reached the top of one of these it should console log this term. If u ask, ScrollHeight is equal to 1% of the devices' screenheight.

let Point1 = false;
document.addEventListener("scroll", e=> {
if (document.documentElement.scrollTop >= 150*ScrollHeight) {
    if (Point1 == false){
        Point1 = true;
        Point1F();
    };
}
})
function Point1F() {
console.log("U've done it');
}

But its not woking for me.

CodePudding user response：

Your code works, as i think the problem why you don't see your .log() is because you didn't reach it.

If scrollHeight is (as you said) "1% of the devices' screenheight", then you need html height to be ~ 3x your screen height;

document.documentElement.style.height = "300vh";

// getting 1% of screen height
const scrollHeight = screen.height / 100; 
const scrollTriggerPoint = scrollHeight * 150;

let point1 = false;

document.addEventListener("scroll", (e) => {
  if (document.documentElement.scrollTop >= scrollTriggerPoint) {
    if (point1 == false){
        point1 = true;
        point1F();
    };
  }
});

function point1F() {
  console.log("u've done it");
}

P.S.

Don't use variable's/function's names starting with a capital letter, use it on;y for constructor functions or classes.

CodePudding user response：

Intersection Observer API

Using scroll position is fine when you have a single trigger point. However, when there are multiple trigger points (as the question suggests) and they are not in a consistent position on different devices, then the Intersection Observer API is a useful solution.

MDN:

Implementing intersection detection in the past involved event handlers and loops calling methods like Element.getBoundingClientRect() to build up the needed information for every element affected. Since all this code runs on the main thread, even one of these can cause performance problems. When a site is loaded with these tests, things can get downright ugly.

You create an observer on the document or a container element and then add the elements you want to watch. And the callback is triggered when an element reaches the threshold setting.

Demo Snippet

The snippet shows how to observe different sections as they scroll in and out of view.

// create an observer on the document or container element

let observer = new IntersectionObserver(([entry]) => {
  if (entry.isIntersecting) {

    // code to execute when the section becomes visible

    console.log("is visible: "   entry.target.id);
    
    // uncomment to trigger only once per section
    // observer.unobserve(entry.target); 
  }
}, {
  root: document,  // or container element or null
  rootMargin: "0px",
  threshold: 0.1
});

// add each section to the observer

document.querySelectorAll("section").forEach(target => {
  observer.observe(target);
});

section {
  height: 5em;
  margin: 1em;
  margin-bottom: 20em;
  background-color: lightblue;
}

Scroll down the page to trigger the observer

<section id="section1">Section 1</section>
<section id="section2">Sectopm 2</section>
<section id="section3">Section 3</section>
<section id="section4">Section 4</section>
<section id="section5">Section 5</section>