Visiblev2.4.0

A class that checks if an element is visible in the base element or viewport.
#visibility

Getting Started / Demos / Documentation / Source

Getting Started

Browser support

IE 7+, latest of Chrome/FF/Safari, iOS 7+ and Android 2.1+ (except 3.x)

Quick steps to use:

Set up your HTML

<ul id="contents">
  <li class="check_visible">
    <div>test1</div>
  </li>
  <li class="check_visible">
    <div>test2</div>
  </li>
  <li class="check_visible">
    <div>test3</div>
  </li>
  <li class="check_visible">
    <div>test4</div>
  </li>
  <li class="check_visible">
    <div>test5</div>
  </li>
  <li class="check_visible">
    <div>test6</div>
  </li>
</ul>

Load files or import library

ES5

<script src="//naver.github.io/egjs-visible/release/latest/dist/visible.pkgd.min.js"></script>
ES6+
import Visible from "@egjs/visible";

Initialize

// Create eg.Visible instance
var visible = new eg.Visible(document,{
    // You can find targets through the targetSelector or targetClass option.
    targetSelector: ".check_visible",
    // or targetClass : "check_visible",
    expandSize : 0
});

// Add change event handler
visible.on("change", function (e) {
    // e.visible;
    // e.invisible;
});

// Call "check" method whenever you want to check visibility change of the elements compared with last time you call "check" method.
// When you call "check" mehtod and if there is a change, "change" event will trigger.
visible.check();

Demos

Basic


html

<div class="wrap" codepen="visible">
  <div class="scroller">
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
    <div class="card item"></div>
  </div>
</div>

JS

You can call observe() to listen both “scroll” and “resize” event from the wrapper element.

// Create eg.Visible instance
var visibleView = new eg.Visible('.scroller',{
  targetClass : "card",
  expandSize : 0
}).on("change", function (e) {
  // Add change event handler
  e.visible.forEach(el => el.classList.add("visible"));
  e.invisible.forEach(el => el.classList.remove("visible"));
  handler(e)
});

// Observe with options
visibleView.observe({ delay: 100, containment: false });

Or you can manually check the visibility change by yourself.

// Create eg.Visible instance
var visibleView = new eg.Visible('.scroller',{
  targetClass : "card",
  expandSize : 0
}).on("change", function (e) {
  // Add change event handler
  $(e.visible).addClass("visible");
  $(e.invisible).removeClass("visible");
  handler(e)
});

// Call "check" method whenever you want to check visibility change of the elements compared with last time you call "check" method.
visibleView.check();    

$('.scroller').scroll(function() {
  // When you call "check" mehtod and if there is a change, "change" event will trigger.
  visibleView.check();    
});