ScrollY always returns 0 unless DevTools is open

I’m working on a web project where I have a scroll-triggered animation. The bar charts in a graph are supposed to pop up when the user reaches a certain point. The animations aren’t happening as expected because scrollY is always returning 0 unless DevTools is open when I load the page.

https://pith.gotbdev.com/

HTML:

<div id="bar-chart" class="chart">
    <div class="chart-section" data-sales="50">
        <img src="/wp-content/uploads/Bill-Clinton.png" alt="Product Image">
        <div class="bar"></div>
    </div>
    <!-- Repeat for other products -->
</div>

CSS:

#bar-chart {
    width: 100%;  /* Full width to contain horizontally laid out content */
    overflow: hidden;  /* Hide overflowing content horizontally */
    position: relative;
}

.chart-section {
    display: flex;  /* Use flexbox for horizontal layout */
    align-items: center;  /* Center items vertically within each section */
    justify-content: flex-start;  /* Align content to the start of the flex container */
    width: 100%;  /* Full width for each section */
    height: 100%;  /* Full viewport height for each section */
    visibility: hidden;  /* Start with sections hidden */
    position: relative;  /* Position sections relative within the container */
    transition: opacity 1s ease-in-out;  /* Smooth transition for appearing */
    opacity: 0;  /* Start fully transparent */
}

.chart-section img {
    width: 300px;  /* Fixed width for images */
    margin-right: 20px;  /* Space between the image and the bar */
    z-index:2;
}

.bar {
    margin-left:-10vw;
    z-index:1;
    height: 50px;  /* Fixed height for bars */
    width: 0;  /* Start with zero width */
    background: -webkit-radial-gradient(circle, #ecc373 0%, #e7c872 40%, #dab681 60%, #c69d50 100%);
    
}

JS:

    document.addEventListener('DOMContentLoaded', function() {
    const sections = document.querySelectorAll('.chart-section');
    const topSection = document.querySelector('.elementor-top-section');
    let animationStarted = false;

    function startAnimation() {
        console.log("Animation started");
        if (!animationStarted) {
            sections.forEach((section, index) => {
                const bar = section.querySelector('.bar');
                const sales = section.dataset.sales;
                bar.style.width = `${sales}%`;  // Animate the width of the bar based on sales data
                section.style.opacity = '1'; // Make the section visible
                                section.style.visibility = 'visible'; // Make the section visible
            });
            animationStarted = true;
        }
    }

    function checkScroll() {
        const scrollThreshold = topSection.offsetTop + topSection.clientHeight; // Set scroll threshold to the bottom of the top section
        const scrollY = window.scrollY;

        if (scrollY > scrollThreshold) {
            console.log("Scroll threshold reached");
            startAnimation();
            window.removeEventListener('scroll', checkScroll); // Remove the scroll event listener once animation started
        }
    }

    window.addEventListener('scroll', checkScroll);
});

I’ve made sure that overflow is set to visible on the HTML and body.

Seeking advice on how to resolve the issue with scrollY returning 0.

Summary: I attempted to implement a scroll-triggered animation on my website using JavaScript. I expected the animation to trigger smoothly as the user scrolled down the page, with elements becoming visible and adjusting dynamically based on the scroll position. However, I encountered an issue where the scrollY property always returned 0 unless DevTools was open. The animation only works when DevTools is active, leading to inconsistent behavior.