CODEWITHSUNDEEP
javascriptreveal.jsintersection-observer
lena
lena

Reputation: 1

Can anyone tell me why using IntersectionObserver for revealing things on my page is interrupting smooth scrolling

I'm facing an issue with smooth scrolling on my website. When I implement an IntersectionObserver for revealing things as they come into view, the scrolling becomes jittery, almost as if the page is stuck, and then you got to givie it another try to actually continue scrolling. The issue seems to happen unless I scroll all the way down to the footer first. After that, the scrolling seems to work fine. How can I fix this and make scrolling smooth at all times?

Also, it even happens when the document opens. when you visit my site, again you got to give it a little push to actually see the rest of the site.

    document.addEventListener("DOMContentLoaded", function () {
        const reveals = document.querySelectorAll(".reveal");

        const observer = new IntersectionObserver(
            (entries, observer) => {
                entries.forEach((entry) => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add("reveal-visible"); // Added class when in view
                        observer.unobserve(entry.target);
                    }
                });
            },
            {threshold: 0.2}
        );

        reveals.forEach((reveal) => {
            observer.observe(reveal);
        });
    });

Upvotes: 0

Views: 27

Answers (0)

Related Questions