Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <script>
- var EventListener = function(element, callback) {
- this._el = element;
- this._cb = callback;
- this._at = false;
- this._hasBeenVisible = false;
- this._hasBeenInvisible = true;
- var _me = this;
- window.onscroll = function() {
- for (q in EventListener.queue.onvisible) {
- EventListener.queue.onvisible[q].call();
- }
- for (q in EventListener.queue.oninvisible) {
- EventListener.queue.oninvisible[q].call();
- }
- };
- return {
- onvisible: function() {
- EventListener.queue.onvisible.push(function() {
- if (!_me._at && _me._hasBeenInvisible && (window.pageYOffset + window.innerHeight) > _me._el.offsetTop && window.pageYOffset < (_me._el.offsetTop + _me._el.scrollHeight)) {
- _me._cb.call();
- _me._at = true;
- _me._hasBeenVisible = true;
- }
- });
- EventListener.queue.oninvisible.push(function() {
- if (_me._hasBeenVisible && ((window.pageYOffset + window.innerHeight) < _me._el.offsetTop || window.pageYOffset > (_me._el.offsetTop + _me._el.scrollHeight))) {
- _me._hasBeenInvisible = true;
- _me._hasBeenVisible = false;
- _me._at = false;
- }
- });
- },
- oninvisible: function() {
- EventListener.queue.oninvisible.push(function() {
- if (!_me._at && _me._hasBeenVisible && ((window.pageYOffset + window.innerHeight) < _me._el.offsetTop || window.pageYOffset > (_me._el.offsetTop + _me._el.scrollHeight))) {
- _me._cb.call();
- _me._at = true;
- _me._hasBeenInvisible = true;
- }
- });
- EventListener.queue.onvisible.push(function() {
- if (_me._hasBeenInvisible && (window.pageYOffset + window.innerHeight) > _me._el.offsetTop && window.pageYOffset < (_me._el.offsetTop + _me._el.scrollHeight)) {
- _me._hasBeenVisible = true;
- _me._hasBeenInvisible = false;
- _me._at = false;
- }
- });
- }
- };
- }
- EventListener.queue = {
- onvisible: [],
- oninvisible: []
- };
- function addListener(element, event, fn) {
- if (typeof element == 'string')
- element = document.getElementById(element);
- var listener = new EventListener(element, fn);
- if (listener['on' + event.toLowerCase()])
- return listener['on' + event.toLowerCase()].call();
- }
- window.onload = function() {
- addListener('event-element', 'visible', function() {
- alert("Element One Visible!");
- });
- addListener('event-element', 'invisible', function() {
- alert("Element One Invisible!");
- });
- addListener('event2-element', 'visible', function() {
- alert("Element Two Visible!");
- });
- addListener('event2-element', 'invisible', function() {
- alert("Element Two Invisible");
- });
- }
- </script>
- </head>
- <body>
- <h1>Hey!</h1>
- <div style="height: 1500px;">
- Please scroll down some pixels.
- </div>
- <p id="event-element">
- This element should cast an event 'onvisible' and 'oninvisible'.
- </p>
- <div style="height: 1000px;">
- </div>
- <p id="event2-element">
- Another one!
- </p>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement