Visiblev2.1.0

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

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,{
    targetClass : "card",
    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

// 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();    
});