How to check if element is visible after scrolling?

on

 

To check if an element is visible after scrolling in a web page using JavaScript, you can determine whether the element's position is within the viewport (i.e., it's in the visible area of the webpage). Here's an example of how you can achieve this:

html
<!DOCTYPE html>
<html>
<head>
    <style>
        body {
            height: 2000px; /* Create a tall webpage to enable scrolling */
        }

        #myElement {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 800px; /* Initial position outside the viewport */
        }
    </style>
</head>
<body>
    <div id="myElement"></div>
    <script>
        function isElementInViewport(el) {
            var rect = el.getBoundingClientRect();

            return (
                rect.top >= 0 &&
                rect.left >= 0 &&
                rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                rect.right <= (window.innerWidth || document.documentElement.clientWidth)
            );
        }

        window.addEventListener('scroll', function() {
            var element = document.getElementById('myElement');
            if (isElementInViewport(element)) {
                console.log('Element is now visible');
            } else {
                console.log('Element is not visible');
            }
        });
    </script>
</body>
</html>

In this example:

  1. We have a div element with the id "myElement" that has initial styling to position it outside the viewport.

  2. We define the isElementInViewport function, which checks whether an element is within the viewport by using getBoundingClientRect() to get the element's position and size and comparing it with the viewport dimensions.

  3. We add a scroll event listener to the window object. Whenever the user scrolls, it checks if the "myElement" is within the viewport using the isElementInViewport function and logs whether it's visible or not.

  4. When the "myElement" becomes visible in the viewport due to scrolling, it will log "Element is now visible" in the browser's console.

You can adapt this code to your specific use case by replacing "#myElement" with the appropriate selector for the element you want to check.

Comments

Post a Comment