javascript - slow - Compruebe si el elemento es visible después de desplazarse

scroll jquery ejemplos

Question

Estoy cargando elementos a través de AJAX. Algunos de ellos solo son visibles si se desplaza hacia abajo en la página.
¿Hay alguna manera de saber si un elemento está ahora en la parte visible de la página?

Answer 1

Adapté esta corta extensión de la función jQuery, que puedes usar libremente (licencia MIT).

/**
 * returns true if an element is visible, with decent performance
 * @param [scope] scope of the render-window instance; default: window
 * @returns {boolean}
 */
jQuery.fn.isOnScreen = function(scope){
    var element = this;
    if(!element){
        return;
    }
    var target = $(element);
    if(target.is('':visible'') == false){
        return false;
    }
    scope = $(scope || window);
    var top = scope.scrollTop();
    var bot = top + scope.height();
    var elTop = target.offset().top;
    var elBot = elTop + target.height();

    return ((elBot <= bot) && (elTop >= top));
};

Answer 2

Aprovechando esta gran respuesta , puede simplificarla un poco más con ES2015 +:

function isScrolledIntoView(el) {
  const { top, bottom } = el.getBoundingClientRect()
  return top >= 0 && bottom <= window.innerHeight
}

Si no te importa que la ventana salga por la ventana y te importa que se haya visto la parte inferior, esto se puede simplificar para

function isSeen(el) {
  return el.getBoundingClientRect().bottom <= window.innerHeight
}

o incluso el de una sola línea

const isSeen = el => el.getBoundingClientRect().bottom <= window.innerHeight

Answer 3

Aquí está mi solución de JavaScript pura que funciona si también está oculta dentro de un contenedor desplazable.

Demo aquí (intente cambiar el tamaño de la ventana también)

var visibleY = function(el){
  var rect = el.getBoundingClientRect(), top = rect.top, height = rect.height, 
    el = el.parentNode
  // Check if bottom of the element is off the page
  if (rect.bottom < 0) return false
  // Check its within the document viewport
  if (top > document.documentElement.clientHeight) return false
  do {
    rect = el.getBoundingClientRect()
    if (top <= rect.bottom === false) return false
    // Check if the element is out of view due to a container scrolling
    if ((top + height) <= rect.top) return false
    el = el.parentNode
  } while (el != document.body)
  return true
};

EDITAR 2016-03-26: Actualicé la solución para tener en cuenta el desplazamiento más allá del elemento para que esté oculto en la parte superior del contenedor con capacidad de desplazamiento. EDITAR 2018-10-08: actualizado para manejar cuando se desplaza fuera de la vista sobre la pantalla.

Answer 4

Aquí hay otra solución de http://web-profile.com.ua/

<script type="text/javascript">
$.fn.is_on_screen = function(){
    var win = $(window);
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.right = viewport.left + win.width();
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.right = bounds.left + this.outerWidth();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.right < bounds.left || viewport.left > bounds.right ||    viewport.bottom < bounds.top || viewport.top > bounds.bottom));
 };

if( $(''.target'').length > 0 ) { // if target element exists in DOM
    if( $(''.target'').is_on_screen() ) { // if target element is visible on screen after DOM loaded
        $(''.log'').html(''<div class="alert alert-success">target element is visible on screen</div>''); // log info       
    } else {
        $(''.log'').html(''<div class="alert">target element is not visible on screen</div>''); // log info
    }
}
$(window).scroll(function(){ // bind window scroll event
if( $(''.target'').length > 0 ) { // if target element exists in DOM
    if( $(''.target'').is_on_screen() ) { // if target element is visible on screen after DOM loaded
        $(''.log'').html(''<div class="alert alert-success">target element is visible on screen</div>''); // log info
    } else {
        $(''.log'').html(''<div class="alert">target element is not visible on screen</div>''); // log info
    }
}
});
</script>

JSFiddle en JSFiddle

Answer 5

Aquí hay una manera de lograr lo mismo usando Mootools, en horizontal, vertical o ambos.

Element.implement({
inVerticalView: function (full) {
    if (typeOf(full) === "null") {
        full = true;
    }

    if (this.getStyle(''display'') === ''none'') {
        return false;
    }

    // Window Size and Scroll
    var windowScroll = window.getScroll();
    var windowSize = window.getSize();
    // Element Size and Scroll
    var elementPosition = this.getPosition();
    var elementSize = this.getSize();

    // Calculation Variables
    var docViewTop = windowScroll.y;
    var docViewBottom = docViewTop + windowSize.y;
    var elemTop = elementPosition.y;
    var elemBottom = elemTop + elementSize.y;

    if (full) {
        return ((elemBottom >= docViewTop) && (elemTop <= docViewBottom)
            && (elemBottom <= docViewBottom) && (elemTop >= docViewTop) );
    } else {
        return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
    }
},
inHorizontalView: function(full) {
    if (typeOf(full) === "null") {
        full = true;
    }

    if (this.getStyle(''display'') === ''none'') {
        return false;
    }

    // Window Size and Scroll
    var windowScroll = window.getScroll();
    var windowSize = window.getSize();
    // Element Size and Scroll
    var elementPosition = this.getPosition();
    var elementSize = this.getSize();

    // Calculation Variables
    var docViewLeft = windowScroll.x;
    var docViewRight = docViewLeft + windowSize.x;
    var elemLeft = elementPosition.x;
    var elemRight = elemLeft + elementSize.x;

    if (full) {
        return ((elemRight >= docViewLeft) && (elemLeft <= docViewRight)
            && (elemRight <= docViewRight) && (elemLeft >= docViewLeft) );
    } else {
        return ((elemRight <= docViewRight) && (elemLeft >= docViewLeft));
    }
},
inView: function(full) {
    return this.inHorizontalView(full) && this.inVerticalView(full);
}});

Answer 6

El mejor método que he encontrado hasta ahora es el complemento jQuery aparecen . Funciona de maravilla.

Imita un evento "aparece" personalizado, que se activa cuando un elemento se desplaza a la vista o se vuelve visible para el usuario.

$(''#foo'').appear(function() {
  $(this).text(''Hello world'');
});

Este complemento se puede usar para evitar solicitudes innecesarias de contenido oculto o fuera del área visible.

Answer 7

El plugin jQuery Waypoints va muy bien aquí.

$(''.entry'').waypoint(function() {
   alert(''You have scrolled to an entry.'');
});

Hay algunos ejemplos en el sitio del complemento .

Answer 8

El uso de la nueva API IntersectionObserver es muy fácil y eficiente para determinar si un elemento es visible en la ventana gráfica. Al usar un observador , elimina la necesidad de adjuntar un evento de scroll y verificar manualmente la devolución de llamada del evento.

// this is the target which is observed
var target = document.querySelector(''div'');

// configure the intersection observer instance
var intersectionObserverOptions = {
  root: null,
  rootMargin: ''150px'',
  threshold: 1.0
}
    
var observer = new IntersectionObserver(onIntersection, intersectionObserverOptions);

// provice the observer with a target
observer.observe(target);

function onIntersection(entries){
  entries.forEach(entry => {
    console.clear();
    console.log(entry.intersectionRatio)
    target.classList.toggle(''visible'', entry.intersectionRatio > 0);
    
    // Are we in viewport?
    if (entry.intersectionRatio > 0) {
      // Stop watching 
      // observer.unobserve(entry.target);
    }
  });
}

.box{ width:100px; height:100px; background:red; margin:1000px; }
.box.visible{ background:green; }

Scroll both Vertically & Horizontally...
<div class=''box''></div>

Ver tabla de compatibilidad de navegadores (no se admite en IE / Safari)

Answer 9

Estaba buscando una manera de ver si el elemento se mostrará pronto, por lo que al extender los fragmentos arriba, logré hacerlo. Pensé que dejaría esto aquí en caso de que ayude a alguien

elm = es el elemento que desea verificar está en la vista

scrollElement = puede pasar una ventana o un elemento padre que tiene un desplazamiento

offset = si desea que se dispare cuando el elemento está a 200 px de distancia antes de que aparezca en la pantalla, pase 200

function isScrolledIntoView(elem, scrollElement, offset)
        {
            var $elem = $(elem);
            var $window = $(scrollElement);
            var docViewTop = $window.scrollTop();
            var docViewBottom = docViewTop + $window.height();
            var elemTop = $elem.offset().top;
            var elemBottom = elemTop + $elem.height();
            
            return (((elemBottom+offset) >= docViewBottom) && ((elemTop-offset) <= docViewTop)) || (((elemBottom-offset) <= docViewBottom) && ((elemTop+offset) >= docViewTop));
        }

Answer 10

Este método devolverá verdadero si alguna parte del elemento está visible en la página. Funcionó mejor en mi caso y puede ayudar a alguien más.

function isOnScreen(element) {
  var elementOffsetTop = element.offset().top;
  var elementHeight = element.height();

  var screenScrollTop = $(window).scrollTop();
  var screenHeight = $(window).height();

  var scrollIsAboveElement = elementOffsetTop + elementHeight - screenScrollTop >= 0;
  var elementIsVisibleOnScreen = screenScrollTop + screenHeight - elementOffsetTop >= 0;

  return scrollIsAboveElement && elementIsVisibleOnScreen;
}

Answer 11

Esto considera cualquier relleno, borde o margen que tenga el elemento, así como elementos más grandes que la propia ventana gráfica.

function inViewport($ele) {
    var lBound = $(window).scrollTop(),
        uBound = lBound + $(window).height(),
        top = $ele.offset().top,
        bottom = top + $ele.outerHeight(true);

    return (top > lBound && top < uBound)
        || (bottom > lBound && bottom < uBound)
        || (lBound >= top && lBound <= bottom)
        || (uBound >= top && uBound <= bottom);
}

Para llamarlo usa algo como esto:

var $myElement = $(''#my-element''),
    canUserSeeIt = inViewport($myElement);

console.log(canUserSeeIt); // true, if element is visible; false otherwise

Answer 12

Esto debería funcionar:

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

Función de utilidad simple Esto le permitirá llamar a una función de utilidad que acepte el elemento que está buscando y si desea que el elemento esté completamente visible o parcial.

function Utils() {

}

Utils.prototype = {
    constructor: Utils,
    isElementInView: function (element, fullyInView) {
        var pageTop = $(window).scrollTop();
        var pageBottom = pageTop + $(window).height();
        var elementTop = $(element).offset().top;
        var elementBottom = elementTop + $(element).height();

        if (fullyInView === true) {
            return ((pageTop < elementTop) && (pageBottom > elementBottom));
        } else {
            return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
        }
    }
};

var Utils = new Utils();

Uso

var isElementInView = Utils.isElementInView($(''#flyout-left-container''), false);

if (isElementInView) {
    console.log(''in view'');
} else {
    console.log(''out of view'');
}

Answer 13

Hay un complemento para jQuery llamado inview que agrega un nuevo evento "inview".

Aquí hay algo de código para un complemento de jQuery que no usa eventos:

$.extend($.expr['':''],{
    inView: function(a) {
        var st = (document.documentElement.scrollTop || document.body.scrollTop),
            ot = $(a).offset().top,
            wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();
        return ot > st && ($(a).height() + ot) < (st + wh);
    }
});

(function( $ ) {
    $.fn.inView = function() {
        var st = (document.documentElement.scrollTop || document.body.scrollTop),
        ot = $(this).offset().top,
        wh = (window.innerHeight && window.innerHeight < $(window).height()) ? window.innerHeight : $(window).height();

        return ot > st && ($(this).height() + ot) < (st + wh);
    };
})( jQuery );

Encontré esto en un comentario aquí ( http://remysharp.com/2009/01/26/element-in-view-event-plugin/ ) por un tipo llamado James

Answer 14

He escrito un componente para la tarea, diseñado para manejar grandes cantidades de elementos extremadamente rápido (con una melodía de <10 ms para 1000 elementos en un móvil lento ).

Funciona con cada tipo de contenedor de desplazamiento al que tiene acceso (ventana, elementos HTML, iframe incorporado, ventana secundaria generada) y es muy flexible en lo que detecta ( visibilidad total o parcial , cuadro de borde o cuadro de contenido , zona de tolerancia personalizada, etc ).

Un enorme conjunto de pruebas, en su mayoría autogenerados, garantiza que funcione como se anuncia cross-browser .

Dale una oportunidad si te gusta: jQuery.isInView . De lo contrario, podría encontrar inspiración en el código fuente, por ejemplo, here .

Answer 15

La genial función de Tweeked Scott Dowding para mi requerimiento, se usa para encontrar si el elemento se ha desplazado hacia la pantalla, es decir, es el borde superior.

function isScrolledIntoView(elem)
{
    var docViewTop = $(window).scrollTop();
    var docViewBottom = docViewTop + $(window).height();
    var elemTop = $(elem).offset().top;
    return ((elemTop <= docViewBottom) && (elemTop >= docViewTop));
}

Answer 16

La mayoría de las respuestas aquí no tienen en cuenta que un elemento también se puede ocultar porque está desplazado fuera de la vista de un div, no solo de toda la página.

Para cubrir esa posibilidad, básicamente tienes que verificar si el elemento está ubicado dentro de los límites de cada uno de sus padres.

Esta solución hace exactamente eso:

function(element, percentX, percentY){
    var tolerance = 0.01;   //needed because the rects returned by getBoundingClientRect provide the position up to 10 decimals
    if(percentX == null){
        percentX = 100;
    }
    if(percentY == null){
        percentY = 100;
    }

    var elementRect = element.getBoundingClientRect();
    var parentRects = [];

    while(element.parentElement != null){
        parentRects.push(element.parentElement.getBoundingClientRect());
        element = element.parentElement;
    }

    var visibleInAllParents = parentRects.every(function(parentRect){
        var visiblePixelX = Math.min(elementRect.right, parentRect.right) - Math.max(elementRect.left, parentRect.left);
        var visiblePixelY = Math.min(elementRect.bottom, parentRect.bottom) - Math.max(elementRect.top, parentRect.top);
        var visiblePercentageX = visiblePixelX / elementRect.width * 100;
        var visiblePercentageY = visiblePixelY / elementRect.height * 100;
        return visiblePercentageX + tolerance > percentX && visiblePercentageY + tolerance > percentY;
    });
    return visibleInAllParents;
};

También le permite especificar a qué porcentaje debe estar visible en cada dirección.
No cubre la posibilidad de que pueda estar oculto debido a otros factores, como display: hidden .

Esto debería funcionar en todos los navegadores principales, ya que solo usa getBoundingClientRect . Yo personalmente lo probé en Chrome e Internet Explorer 11.

Answer 17

Modificación simple para div desplazable (contenedor)

var isScrolledIntoView = function(elem, container) {
    var containerHeight = $(container).height();
    var elemTop = $(elem).position().top;
    var elemBottom = elemTop + $(elem).height();
    return (elemBottom > 0 && elemTop < containerHeight);
}

NOTA: esto no funciona si el elemento es más grande que el div desplazable.

Answer 18

Necesitaba verificar la visibilidad en los elementos dentro del contenedor DIV desplazable

    //p = DIV container scrollable
    //e = element
    function visible_in_container(p, e) {
        var z = p.getBoundingClientRect();
        var r = e.getBoundingClientRect();

        // Check style visiblilty and off-limits
        return e.style.opacity > 0 && e.style.display !== ''none'' &&
               e.style.visibility !== ''hidden'' &&
               !(r.top > z.bottom || r.bottom < z.top ||
                 r.left > z.right || r.right < z.left);
    }

Answer 19

Prefiero usar jQuery expr

jQuery.extend(jQuery.expr['':''], {  
    inview: function (elem) {
        var t = $(elem);
        var offset = t.offset();
        var win = $(window); 
        var winST = win.scrollTop();
        var elHeight = t.outerHeight(true);

        if ( offset.top > winST - elHeight && offset.top < winST + elHeight + win.height()) {
            return true;    
        }    
        return false;  
    }
});

para que puedas usarlo de esta manera

$(".my-elem:inview"); //returns only element that is in view
$(".my-elem").is(":inview"); //check if element is in view
$(".my-elem:inview").length; //check how many elements are in view

Puede agregar fácilmente dicho código dentro de la función de evento de scroll , etc. para verificarlo cada vez que el usuario desplace la vista.

Answer 20

Puede utilizar el complemento jquery "onScreen" para verificar si el elemento se encuentra en la vista actual cuando se desplaza. El complemento establece el ": onScreen" del selector en verdadero cuando el selector aparece en la pantalla. Este es el enlace para el complemento que puede incluir en su proyecto. " http://benpickles.github.io/onScreen/jquery.onscreen.min.js "

Puedes probar el siguiente ejemplo que funciona para mí.

$(document).scroll(function() {
    if($("#div2").is('':onScreen'')) {
        console.log("Element appeared on Screen");
        //do all your stuffs here when element is visible.
    }
    else {
        console.log("Element not on Screen");
        //do all your stuffs here when element is not visible.
    }
});

Código HTML:

<div id="div1" style="width: 400px; height: 1000px; padding-top: 20px; position: relative; top: 45px"></div> <br>
<hr /> <br>
<div id="div2" style="width: 400px; height: 200px"></div>

CSS:

#div1 {
    background-color: red;
}
#div2 {
    background-color: green;
}

Answer 21

Qué tal si

function isInView(elem){
   return $(elem).offset().top - $(window).scrollTop() < $(elem).height() ;
}

Después de eso, puedes activar lo que quieras una vez que el elemento esté a la vista de esta manera

$(window).scroll(function(){
   if (isInView($(''.classOfDivToCheck'')))
      //fire whatever you what 
      dothis();
})

Eso me funciona bien

Answer 22

Se modificó la respuesta aceptada para que el elemento tenga que tener su propiedad de visualización establecida en algo distinto de "ninguno" para que la calidad sea visible.

function isScrolledIntoView(elem) {
   var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();
  var elemDisplayNotNone = $(elem).css("display") !== "none";

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && elemDisplayNotNone);
}

Answer 23

Si desea modificar esto para el elemento de desplazamiento dentro de otro div,

function isScrolledIntoView (elem, divID) 

{

    var docViewTop = $(''#'' + divID).scrollTop();


    var docViewBottom = docViewTop + $(''#'' + divID).height();

    var elemTop = $(elem).offset().top;
    var elemBottom = elemTop + $(elem).height();

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
}

Answer 24

Tengo un método de este tipo en mi aplicación, pero no usa jQuery:

/* Get the TOP position of a given element. */
function getPositionTop(element){
    var offset = 0;
    while(element) {
        offset += element["offsetTop"];
        element = element.offsetParent;
    }
    return offset;
}

/* Is a given element is visible or not? */
function isElementVisible(eltId) {
    var elt = document.getElementById(eltId);
    if (!elt) {
        // Element not found.
        return false;
    }
    // Get the top and bottom position of the given element.
    var posTop = getPositionTop(elt);
    var posBottom = posTop + elt.offsetHeight;
    // Get the top and bottom position of the *visible* part of the window.
    var visibleTop = document.body.scrollTop;
    var visibleBottom = visibleTop + document.documentElement.offsetHeight;
    return ((posBottom >= visibleTop) && (posTop <= visibleBottom));
}

Edición: este método funciona bien para IE (al menos la versión 6). Lea los comentarios para la compatibilidad con FF.

Answer 25

Un ejemplo basado en esta respuesta para verificar si un elemento es 75% visible (es decir, menos del 25% está fuera de la pantalla).

function isScrolledIntoView(el) {
  // check for 75% visible
  var percentVisible = 0.75;
  var elemTop = el.getBoundingClientRect().top;
  var elemBottom = el.getBoundingClientRect().bottom;
  var elemHeight = el.getBoundingClientRect().height;
  var overhang = elemHeight * (1 - percentVisible);

  var isVisible = (elemTop >= -overhang) && (elemBottom <= window.innerHeight + overhang);
  return isVisible;
}

Answer 26

Vainilla simple para verificar si el elemento ( el ) es visible en div desplazable ( holder )

function isElementVisible (el, holder) {
  holder = holder || document.body
  const { top, bottom, height } = el.getBoundingClientRect()
  const holderRect = holder.getBoundingClientRect()

  return top <= holderRect.top
    ? holderRect.top - top <= height
    : bottom - holderRect.bottom <= height
},

Uso con jQuery:

var el = $(''tr:last'').get(0);
var holder = $(''table'').get(0);
isVisible =  isScrolledIntoView(el, holder);

Answer 27

WebResourcesDepot escribió una secuencia de comandos para cargar mientras se desplaza que usa jQuery hace algún tiempo. Puedes ver su demostración en vivo aquí . La carne de su funcionalidad fue esta:

$(window).scroll(function(){
  if  ($(window).scrollTop() == $(document).height() - $(window).height()){
    lastAddedLiveFunc();
  }
});

function lastAddedLiveFunc() { 
  $(''div#lastPostsLoader'').html(''<img src="images/bigLoader.gif">'');
  $.post("default.asp?action=getLastPosts&lastPostID="+$(".wrdLatest:last").attr("id"),
    function(data){
        if (data != "") {
          $(".wrdLatest:last").after(data);         
        }
      $(''div#lastPostsLoader'').empty();
    });
};

Answer 28

isScrolledIntoView es una función muy necesaria, así que la probé, funciona para elementos que no son más altos que la ventana gráfica, pero si el elemento es más grande que la ventana gráfica no funciona. Para solucionar este problema fácilmente cambiar la condición

return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));

a esto:

return (docViewBottom >= elemTop && docViewTop <= elemBottom);

Vea la demostración aquí: http://jsfiddle.net/RRSmQ/

Answer 29

Esta respuesta en vainilla:

function isScrolledIntoView(el) {
    var rect = el.getBoundingClientRect();
    var elemTop = rect.top;
    var elemBottom = rect.bottom;

    // Only completely visible elements return true:
    var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
    // Partially visible elements return true:
    //isVisible = elemTop < window.innerHeight && elemBottom >= 0;
    return isVisible;
}

Answer 30

function isScrolledIntoView(elem) {
    var docViewTop = $(window).scrollTop(),
        docViewBottom = docViewTop + $(window).height(),
        elemTop = $(elem).offset().top,
     elemBottom = elemTop + $(elem).height();
   //Is more than half of the element visible
   return ((elemTop + ((elemBottom - elemTop)/2)) >= docViewTop && ((elemTop + ((elemBottom - elemTop)/2)) <= docViewBottom));
}