How to Check If Element Is Visible After Scrolling

How to check if element is visible after scrolling?

This should do the trick:

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

Simple Utility Function
This will allow you to call a utility function that accepts the element you're looking for and if you want the element to be fully in view or partially.

function Utils() {

}

Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = $(window).scrollTop();
        var pageBottom = pageTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
        }
    }
};

var Utils = new Utils();

Usage

var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);

if (isElementInView) {
    console.log('in view');
} else {
    console.log('out of view');
}

Check if an element is visible on screen

Here is a script returning a promise using the new IntersectionObserver API for checking whether or not an element is actually visible in the viewport:

function isVisible(domElement) {
  return new Promise(resolve => {
    const o = new IntersectionObserver(([entry]) => {
      resolve(entry.intersectionRatio === 1);
      o.disconnect();
    });
    o.observe(domElement);
  });
}

Which you can use in your code:

const visible = await isVisible(document.querySelector('#myElement'));
console.log(visible);

How detect which child element is visible after scrolling the parent div?

Since this question never tagged jQuery, here's a pure Javascript solution that simulates the behavior you're looking for to the best of my knowledge. The solution calculates the amount of pixels of each child element currently visible within the container. If the amount is bigger or equal to half the size of the container, it assumes this is the page your visitor is looking at.

function getVisibleHeight(element){

 const container = document.getElementById("container");

 let scrollTop = container.scrollTop;

 let scrollBot = scrollTop + container.clientHeight;

 let containerRect = container.getBoundingClientRect();

 let eleRect = element.getBoundingClientRect();

 let rect = {};

 rect.top = eleRect.top - containerRect.top,

 rect.right = eleRect.right - containerRect.right,

 rect.bottom = eleRect.bottom - containerRect.bottom,

 rect.left = eleRect.left - containerRect.left;

 let eleTop = rect.top + scrollTop;

 let eleBot = eleTop + element.offsetHeight;

 let visibleTop = eleTop < scrollTop ? scrollTop : eleTop;

 let visibleBot = eleBot > scrollBot ? scrollBot : eleBot;

 return visibleBot - visibleTop;

}

document.addEventListener("DOMContentLoaded", function(event) {

 const container = document.getElementById("container");

 const divs = document.querySelectorAll('.page');

 container.addEventListener("scroll", () => {

  for(let i=0; i<divs.length; i++){

   const containerHeight = container.clientHeight;

   // Gets the amount of pixels currently visible within the container

   let visiblePageHeight = getVisibleHeight(divs[i]);

   // If the amount of visible pixels is bigger or equal to half the container size, set page

   if(visiblePageHeight >= containerHeight / 2){

    document.getElementById('page-counter').innerText = i+1;

   }

  }

 }, false);

});

#container {

 width: 400px;

 height: 300px;

 overflow: auto;

}

.page {

 width: 380px;

}

.red {

 background-color: red;

 height: 300px;

}

.blue {

 background-color: blue;

 height: 200px;

}

Current page: <span id="page-counter">1</span>

<div id='container'>

 <div id="div-1" class="page red"></div>

 <div id="div-2" class="page blue"></div>

 <div id="div-3" class="page red"></div>

 <div id="div-4" class="page blue"></div>

</div>

How can I tell if a DOM element is visible in the current viewport?

Update: Time marches on and so have our browsers. This technique is no longer recommended and you should use Dan's solution if you do not need to support version of Internet Explorer before 7.

Original solution (now outdated):

This will check if the element is entirely visible in the current viewport:

function elementInViewport(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top >= window.pageYOffset &&
    left >= window.pageXOffset &&
    (top + height) <= (window.pageYOffset + window.innerHeight) &&
    (left + width) <= (window.pageXOffset + window.innerWidth)
  );
}

You could modify this simply to determine if any part of the element is visible in the viewport:

function elementInViewport2(el) {
  var top = el.offsetTop;
  var left = el.offsetLeft;
  var width = el.offsetWidth;
  var height = el.offsetHeight;

  while(el.offsetParent) {
    el = el.offsetParent;
    top += el.offsetTop;
    left += el.offsetLeft;
  }

  return (
    top < (window.pageYOffset + window.innerHeight) &&
    left < (window.pageXOffset + window.innerWidth) &&
    (top + height) > window.pageYOffset &&
    (left + width) > window.pageXOffset
  );
}

Jquery check if element is visible in viewport

According to the documentation for that plugin, .visible() returns a boolean indicating if the element is visible. So you'd use it like this:

if ($('#element').visible(true)) {
    // The element is visible, do something
} else {
    // The element is NOT visible, do something else
}

---

Related Topics