Detect If An Element Is Visible - jQuery onScreen

Detect If An Element Is Visible - jQuery onScreen

This inView checker plugin provides a collection of useful event handlers to do some cool stuff when an element or only part of the element becomes visible (or invisible) on page scroll.

1. Add the JavaScript file jquery.onscreen.js after jQuery library and the onScreen plugin is ready for use.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" 
        integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" 
        crossorigin="anonymous">
</script>
<script src="jquery.onscreen.js"></script>

2. Check an element's state using the Inview event. Possible parameters:

  • visiblePartX: horizontal part of the element (left, right, both, none).
  • visiblePartY: vertical part of the element (top, bottom, both, none).
$('.box').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
  if (isInView) {
    alert('element is now visible in the viewport!');
    if (visiblePartY == 'top') {
      alert('top part of element is visible!')
    } else if (visiblePartY == 'bottom') {
      alert('bottom part of element is visible!')
    } else {
      alert('whole part of element is visible!');
    }
  } else {
    alert('element has gone out of viewport!');
  }
});

3. Check an element's state using the onscreen event that will keep firing if the user scrolls and the element remains on screen or not. Possible parameters:

  • top: top offset
  • left: left offset
  • bottom: bottom offset
  • right: right offset
  • percentFromTop: Percentage offset of top
  • percentFromLeft: Percentage offset of left
  • percentFromBottom: Percentage offset of bottom
  • percentFromRight: Percentage offset of right
  • percentInview: Percentage area inview compared to the total possible inview area
  • percentInviewHorizontal: Percentage horizonally inview compared to the total possible inview horizonally
  • percentInviewVertical: Percentage vertically inview compared to the total possible inview vertically
  • onscreen: True/ or false
  • uniqueMeasurementId: Unique measurement Id
$('div').on('onscreen', function(event, measurement) {
  if (measurement.percentInview > 0) {
    alert('element is now visible in the viewport');
    if (measurement.percentInviewVertical < 50) {
      alert('element is less than half onscreen vertically');
    } else {
      alert('element is half or more than half onscreen vertically');
    }
  } else {
    alert('element has gone out of viewport');
  }
});

4. Decide whether to allow scroll over.

$.inview.config({
  allowScrollOver: false
});

This awesome jQuery plugin is developed by adaptlearning. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 26.12.2017
  • Source