Skip to content

Instantly share code, notes, and snippets.

@iqbalrony

iqbalrony/isInViewport.js

Last active May 14, 2020 07:14
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save iqbalrony/012e0fb27b942f9a84788c9203f9967c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save iqbalrony/012e0fb27b942f9a84788c9203f9967c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. iqbalrony revised this gist May 14, 2020. No changes.
  2. iqbalrony revised this gist May 14, 2020. 1 changed file with 23 additions and 40 deletions.
    63 changes: 23 additions & 40 deletions isInViewport.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,29 +1,19 @@
    ( function($){
    "use strict";
    // By JavaScript
    var $target = document.querySelector('.targetClass'),
    docViewHeight,
    docViewTop,
    docViewBottom,
    eHeight,
    eTop,
    eBottom;
    var setPosition = function () {
    docViewHeight = window.innerHeight;
    docViewTop = window.scrollY;
    docViewBottom = docViewTop + docViewHeight;
    eHeight = $target.offsetHeight;
    eTop = $target.offsetTop;
    eBottom = eTop + eHeight;
    return;
    }
    setPosition();
    var isInView = function () {
    var $target = document.querySelector('.targetClass');
    var setPosition = function ($target) {
    var docViewHeight = window.innerHeight;
    var docViewTop = window.scrollY;
    var docViewBottom = docViewTop + docViewHeight;
    var eHeight = $target.offsetHeight;
    var eTop = $target.offsetTop;
    var eBottom = eTop + eHeight;
    return ((eTop <= docViewBottom) && (eBottom >= docViewTop));
    }
    setPosition($target);
    window.addEventListener('scroll', function () {
    setPosition();
    if(isInView()){
    if(setPosition($target)){
    console.log('In the viewport!');
    } else {
    console.log('Not in the viewport.');
    @@ -33,33 +23,26 @@

    // By jQuery
    var $target = $('.targetClass'),
    docViewHeight,
    docViewTop,
    docViewBottom,
    eHeight,
    eTop,
    eBottom;
    var setPosition = function () {
    docViewHeight = $(window).height();
    docViewTop = $(window).scrollTop();
    docViewBottom = docViewTop + docViewHeight;
    eHeight = $target.outerHeight();
    eTop = $target.offset().top;
    eBottom = eTop + eHeight;
    return;
    }
    setPosition();
    var isInView = function () {
    once = false;
    var setPosition = function ($target) {
    var docViewHeight = $(window).height();
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + docViewHeight;
    var eHeight = $target.outerHeight();
    var eTop = $target.offset().top;
    var eBottom = eTop + eHeight;
    return ((eTop <= docViewBottom) && (eBottom >= docViewTop));
    }
    setPosition($target);
    $(window).on('scroll', function (e){
    setPosition();
    if(isInView()){
    if(setPosition($target)){
    console.log('In the viewport!');
    } else {
    console.log('Not in the viewport.');
    }
    $( this ).off( e );
    if(!once){
    $( this ).off( e );
    }
    });

    // is the target element fully in viewport?
  3. iqbalrony revised this gist May 14, 2020. No changes.
  4. iqbalrony revised this gist May 14, 2020. 1 changed file with 26 additions and 7 deletions.
    33 changes: 26 additions & 7 deletions isInViewport.js
    View file
    Original file line number Diff line number Diff line change
    @@ -31,20 +31,20 @@
    },{once:true});


    // By JavaScript
    var $target = document.querySelector('.targetClass'),
    // By jQuery
    var $target = $('.targetClass'),
    docViewHeight,
    docViewTop,
    docViewBottom,
    eHeight,
    eTop,
    eBottom;
    var setPosition = function () {
    docViewHeight = window)
    docViewTop = window.scrollY;
    docViewHeight = $(window).height();
    docViewTop = $(window).scrollTop();
    docViewBottom = docViewTop + docViewHeight;
    eHeight = $target.offsetHeight;
    eTop = $target.offsetTop;
    eHeight = $target.outerHeight();
    eTop = $target.offset().top;
    eBottom = eTop + eHeight;
    return;
    }
    @@ -60,7 +60,26 @@
    console.log('Not in the viewport.');
    }
    $( this ).off( e );
    },{once:true});
    });

    // is the target element fully in viewport?
    function isInViewport(elem) {
    var bounding = elem.getBoundingClientRect();
    return (
    bounding.top >= 0 &&
    bounding.left >= 0 &&
    bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
    bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
    };
    var item = document.querySelector('.targetClass');
    window.addEventListener('scroll', function(e){
    if ( isInViewport(item) ) {
    console.log('Fully in the viewport!');
    } else {
    console.log('Not fully in the viewport');
    }
    });


    });
  5. iqbalrony created this gist May 14, 2020.
    66 changes: 66 additions & 0 deletions isInViewport.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,66 @@
    ( function($){
    "use strict";
    // By JavaScript
    var $target = document.querySelector('.targetClass'),
    docViewHeight,
    docViewTop,
    docViewBottom,
    eHeight,
    eTop,
    eBottom;
    var setPosition = function () {
    docViewHeight = window.innerHeight;
    docViewTop = window.scrollY;
    docViewBottom = docViewTop + docViewHeight;
    eHeight = $target.offsetHeight;
    eTop = $target.offsetTop;
    eBottom = eTop + eHeight;
    return;
    }
    setPosition();
    var isInView = function () {
    return ((eTop <= docViewBottom) && (eBottom >= docViewTop));
    }
    window.addEventListener('scroll', function () {
    setPosition();
    if(isInView()){
    console.log('In the viewport!');
    } else {
    console.log('Not in the viewport.');
    }
    },{once:true});


    // By JavaScript
    var $target = document.querySelector('.targetClass'),
    docViewHeight,
    docViewTop,
    docViewBottom,
    eHeight,
    eTop,
    eBottom;
    var setPosition = function () {
    docViewHeight = window)
    docViewTop = window.scrollY;
    docViewBottom = docViewTop + docViewHeight;
    eHeight = $target.offsetHeight;
    eTop = $target.offsetTop;
    eBottom = eTop + eHeight;
    return;
    }
    setPosition();
    var isInView = function () {
    return ((eTop <= docViewBottom) && (eBottom >= docViewTop));
    }
    $(window).on('scroll', function (e){
    setPosition();
    if(isInView()){
    console.log('In the viewport!');
    } else {
    console.log('Not in the viewport.');
    }
    $( this ).off( e );
    },{once:true});


    });