Top community members

Welcome to Dirask IT community! ❀ đŸ’»
We are community that shares solutions with each other.

If you think you have something to add here.

you are welcome with your fresh ideas - List Articles

[Edit]
EN

JavaScript - how to check if element is visible on part of web page because of scrolling?

4 points
Created by:
Ticket Ninja
2329

In this article, we're going to have a look at how to check with JavaScript if element is visible on screen or not during scrolling in JavaScript.

This kind of script can be used to detect if image is in visible part of web page and sould be loaded to prevent unnecessary content loading.

1. Page scrolling example

In this section presented solution shows how to check if element visibility if is located on page.

Presented script is universal because as container we can use window object or any element.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    body { height: 200px; }
    div { margin: 300px 0; border: 1px solid red; height: 100px; }
  </style>
</head>
<body>
  <p>Scroll example and check console.</p>
  <div id="element">
      Something here...
  </div>
  <script>

    // calculates relative position of element
    function calculateOffset(element) {
        var result = 0;
        while (element) {
            var value = element.offsetTop;
            if (value) {
              	result += value;
            }
           	// jump to next relative, absolute or fixed parent element
            element = element.offsetParent;
        }
        return result;
    }
    
    // calculates space between elements
    function calculateSpace(firstElement, secondElement) {
        var firstOffset = calculateOffset(firstElement);
        var secondOffset = calculateOffset(secondElement);
        return secondOffset - firstOffset;
    }
    
    // element visibility state changed by scrolling detector
    function VisibilityDetector(container, element, onChange) {
        var enabled = false;
      	var visible = null;
      
        function onScroll() {
            var elementTop = calculateSpace(container, element);

            var containerHeight = container.innerHeight || container.clientHeight || 0;
            var elementHeight = element.offsetHeight;
          	var scrollTop = container.scrollY || container.scrollTop || 0;

            if (elementTop - containerHeight < scrollTop
                && scrollTop < elementTop + elementHeight) {
            	if (visible == true) {
                	return;
                }
              	visible = true;
              	onChange(visible);
            } else {
            	if (visible == false) {
					return;
				}
				visible = false;
				onChange(visible);
            }
        }

        this.enable = function() {
            if (enabled) {
            	return;
            }
            enabled = true;
          	visible = null;
            container.addEventListener('scroll', onScroll, false);
            onScroll();
        };
        this.disable = function() {
            if (enabled) {
                enabled = false;
                container.removeEventListener('scroll', onScroll, false);
            }
        };

        // it is good to destroy object if is not needed
        this.destroy = this.disable;
    }

    // Usage example:
    
    var element = document.querySelector('#element');
    
    var detector = new VisibilityDetector(window, element, function(visible) {
	    console.clear();
        console.log('element visible = ' + visible);
    });
    detector.enable();

  </script>
</body>
</html>

2. Nested element scrolling example

In this section presented solution shows how to check if element visibility if is located in another scollable element.

This is same script like above presented but used with element container.

// ONLINE-RUNNER:browser;

<!doctype html>
<html>
<head>
  <style>
    #container { border: 1px solid blue; height: 200px; overflow-y: auto; }
    #element { margin: 300px 0; border: 1px solid red; height: 100px; }
  </style>
</head>
<body>
  <p>Page text...</p>
  <div id="container">
    <p>Scroll example and check console.</p>
  	<div id="element">
      Something here...
    </div>
  </div>
  <p>Page text...</p>
  <script>

    // calculates relative position of element
    function calculateOffset(element) {
        var result = 0;
        while (element) {
            var value = element.offsetTop;
            if (value) {
              	result += value;
            }
           	// jump to next relative, absolute or fixed parent element
            element = element.offsetParent;
        }
        return result;
    }
    
    // calculates space between elements
    function calculateSpace(firstElement, secondElement) {
        var firstOffset = calculateOffset(firstElement);
        var secondOffset = calculateOffset(secondElement);
        return secondOffset - firstOffset;
    }
    
    // element visibility state changed by scrolling detector
    function VisibilityDetector(container, element, onChange) {
        var enabled = false;
      	var visible = null;
      
        function onScroll() {
            var elementTop = calculateSpace(container, element);

            var containerHeight = container.innerHeight || container.clientHeight || 0;
            var elementHeight = element.offsetHeight;
          	var scrollTop = container.scrollY || container.scrollTop || 0;

            if (elementTop - containerHeight < scrollTop
                && scrollTop < elementTop + elementHeight) {
            	if (visible == true) {
                	return;
                }
              	visible = true;
              	onChange(visible);
            } else {
            	if (visible == false) {
					return;
				}
				visible = false;
				onChange(visible);
            }
        }

        this.enable = function() {
            if (enabled) {
            	return;
            }
            enabled = true;
          	visible = null;
            container.addEventListener('scroll', onScroll, false);
            onScroll();
        };
        this.disable = function() {
            if (enabled) {
                enabled = false;
                container.removeEventListener('scroll', onScroll, false);
            }
        };

        // it is good to destroy object if is not needed
        this.destroy = this.disable;
    }

    // Usage example:
    
    var container = document.querySelector('#container');
    var element = document.querySelector('#element');
    
    var detector = new VisibilityDetector(container, element, function(visible) {
	    console.clear();
        console.log('element visible = ' + visible);
    });
    detector.enable();

  </script>
</body>
</html>

 

Checkout latest Findings & News:

Checkout latest questions:

Checkout latest wiki articles:

Hey 👋
Would you like to know what we do?
  • Dirask is IT community, where we share coding knowledge and help each other to solve coding problems.
  • We welcome everyone,
    no matter what the experience,
    no matter how basic the question is,
    this community will help you.
Read more