javascript - style - Desplazarse si el elemento no es visible

title html css

Question

cómo determinar, usando jquery, si el elemento es visible en la vista de página actual. Me gustaría agregar una funcionalidad de comentarios, que funciona como en Facebook, donde solo se desplaza al elemento si no está visible actualmente. Por visible, quiero decir que no está en la vista de página actual, pero puede desplazarse hasta el elemento.

Answer 1

Después de probar todas estas soluciones y muchas más, ninguna de ellas cumplió con mi requisito de ejecutar software de portal web antiguo (10 años) dentro de IE11 (en algún modo de compatibilidad). Todos ellos no pudieron determinar correctamente si el elemento era visible. Sin embargo encontré esta solution . Espero que ayude.

function scrollIntoViewIfOutOfView(el) {
    var topOfPage = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
    var heightOfPage = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    var elY = 0;
    var elH = 0;
    if (document.layers) { // NS4
        elY = el.y;
        elH = el.height;
    }
    else {
        for(var p=el; p&&p.tagName!=''BODY''; p=p.offsetParent){
            elY += p.offsetTop;
        }
        elH = el.offsetHeight;
    }
    if ((topOfPage + heightOfPage) < (elY + elH)) {
        el.scrollIntoView(false);
    }
    else if (elY < topOfPage) {
        el.scrollIntoView(true);
    }
}

Answer 2

El siguiente código me ayudó a lograr el resultado.

function scroll_to_element_if_not_inside_view(element){
  if($(window).scrollTop() > element.offset().top){
    $(''html, body'').animate( { scrollTop: element.offset().top }, {duration: 400 } );
  }
}

Answer 3

Hay un complemento de jQuery que nos permite verificar rápidamente si un elemento completo (o también una parte de él) está dentro de la ventana visual del navegador, independientemente de la posición de desplazamiento de la ventana. Necesitas descargarlo desde su repositorio GitHub :

Supongamos que tiene el siguiente HTML y desea alertar cuando el pie de página está visible:

<section id="container">
    <aside id="sidebar">
        <p>
            Scroll up and down to alert the footer visibility by color:
        </p>
        <ul>
            <li><span class="blue">Blue</span> = footer <u>not visible</u>;</li>
            <li><span class="yellow">Yellow</span> = footer <u>visible</u>;</li>
        </ul>
        <span id="alert"></span>
    </aside>
    <section id="main_content"></section>
</section>
<footer id="page_footer"></footer>

Entonces, agregue el complemento antes del cierre de la etiqueta de cuerpo:

<script type="text/javascript" src="js/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="js/jquery_visible/examples/js/jq.visible.js"></script>

Después de eso puedes usarlo de una manera simple como esta:

<script type="text/javascript">
jQuery( document ).ready(function ( $ ) {
  if ($("footer#page_footer").visible(true, false, "both")) {
    $("#main_content").css({"background-color":"#ffeb3b"});
    $("span#alert").html("Footer visible");
  } else {
    $("#main_content").css({"background-color":"#4aafba"});
    $("span#alert").html("Footer not visible");
  }

  $(window).scroll(function() {
    if ($("footer#page_footer").visible(true, false, "both")) {
      $("#main_content").css({"background-color":"#ffeb3b"});
      $("span#alert").html("Footer visible");
    } else {
      $("#main_content").css({"background-color":"#4aafba"});
      $("span#alert").html("Footer not visible");
    }
  });
});
</script>

Aqui una demo

Answer 4

Hice una versión ligeramente más genérica de la respuesta de digitalPBK que desplaza mínimamente un elemento contenido dentro de un div o algún otro contenedor (incluido el cuerpo). Puede pasar elementos DOM o selectores a la función, siempre que el elemento esté contenido de alguna manera dentro del elemento primario.

function scrollToView(element, parent) {
    element = $(element);
    parent = $(parent);

    var offset = element.offset().top + parent.scrollTop();

    var height = element.innerHeight();
    var offset_end = offset + height;
    if (!element.is(":visible")) {
        element.css({"visibility":"hidden"}).show();
        var offset = element.offset().top;
        element.css({"visibility":"", "display":""});
    }

    var visible_area_start = parent.scrollTop();
    var visible_area_end = visible_area_start + parent.innerHeight();

    if (offset-height < visible_area_start) {
        parent.animate({scrollTop: offset-height}, 600);
        return false;
    } else if (offset_end > visible_area_end) {
        parent.animate({scrollTop: parent.scrollTop()+ offset_end - visible_area_end }, 600);
        return false;

    }
    return true;
}

Answer 5

Mejorando la respuesta de Loktar, arreglando lo siguiente:

1. Desplazarse hacia arriba

2. Desplácese hasta una pantalla: ninguno elemento (como divs ocultos, etc.)

   function scrollToView(element){
       var offset = element.offset().top;
       if(!element.is(":visible")) {
           element.css({"visibility":"hidden"}).show();
           var offset = element.offset().top;
           element.css({"visibility":"", "display":""});
       }
   
       var visible_area_start = $(window).scrollTop();
       var visible_area_end = visible_area_start + window.innerHeight;
   
       if(offset < visible_area_start || offset > visible_area_end){
            // Not in view so scroll to it
            $(''html,body'').animate({scrollTop: offset - window.innerHeight/3}, 1000);
            return false;
       }
       return true;
   }

Answer 6

Puedes echar un vistazo a su impresionante enlace del libro de cocina de jQuery:

Determinar si un elemento está dentro de la ventana gráfica

Probar si el elemento está contenido en la vista

jQuery(document).ready(function() {
    var viewportWidth = jQuery(window).width(),
        viewportHeight = jQuery(window).height(),
        documentScrollTop = jQuery(document).scrollTop(),
        documentScrollLeft = jQuery(document).scrollLeft(),

        $myElement = jQuery(''#myElement''),

        elementOffset = $myElement.offset(),
        elementHeight = $myElement.height(),
        elementWidth = $myElement.width(),

        minTop = documentScrollTop,
        maxTop = documentScrollTop + viewportHeight,
        minLeft = documentScrollLeft,
        maxLeft = documentScrollLeft + viewportWidth;

    if (
        (elementOffset.top > minTop && elementOffset.top + elementHeight < maxTop) &&
        (elementOffset.left > minLeft && elementOffset.left + elementWidth < maxLeft)
    ) {
        alert(''entire element is visible'');
    } else {
        alert(''entire element is not visible'');
    }
});

Probar cuánto del elemento es visible

jQuery(document).ready(function() {

var viewportWidth = jQuery(window).width(),
    viewportHeight = jQuery(window).height(),

    documentScrollTop = jQuery(document).scrollTop(),
    documentScrollLeft = jQuery(document).scrollLeft(),

    $myElement = jQuery(''#myElement''),

    verticalVisible, horizontalVisible,

    elementOffset = $myElement.offset(),
    elementHeight = $myElement.height(),
    elementWidth = $myElement.width(),

    minTop = documentScrollTop,
    maxTop = documentScrollTop + viewportHeight,
    minLeft = documentScrollLeft,
    maxLeft = documentScrollLeft + viewportWidth;

function scrollToPosition(position) {
    jQuery(''html,body'').animate({
        scrollTop : position.top,
        scrollLeft : position.left
    }, 300);
}

if (
    ((elementOffset.top > minTop && elementOffset.top < maxTop) ||
    (elementOffset.top + elementHeight > minTop && elementOffset.top + 
elementHeight < maxTop))
&&  ((elementOffset.left > minLeft && elementOffset.left < maxLeft) ||
    (elementOffset.left + elementWidth > minLeft && elementOffset.left +
elementWidth < maxLeft)))
{
    alert(''some portion of the element is visible'');

    if (elementOffset.top >= minTop && elementOffset.top + elementHeight 
<= maxTop) {
        verticalVisible = elementHeight;
    } else if (elementOffset.top < minTop) {
        verticalVisible = elementHeight - (minTop - elementOffset.top);
    } else {
        verticalVisible = maxTop - elementOffset.top;
    }

    if (elementOffset.left >= minLeft && elementOffset.left + elementWidth 
<= maxLeft) {
        horizontalVisible = elementWidth;
    } else if (elementOffset.left < minLeft) {
        horizontalVisible = elementWidth - (minLeft - elementOffset.left);
    } else {
        horizontalVisible = maxLeft - elementOffset.left;
    }

    var percentVerticalVisible = (verticalVisible / elementHeight) * 100;
    var percentHorizontalVisible = (horizontalVisible / elementWidth) * 100;

    if (percentVerticalVisible < 50 || percentHorizontalVisible < 50) {
        alert(''less than 50% of element visible; scrolling'');
        scrollToPosition(elementOffset);
    } else {
        alert(''enough of the element is visible that there is no need to scroll'');
    }

} else {
    // element is not visible; scroll to it
    alert(''element is not visible; scrolling'');
    scrollToPosition(elementOffset);
}

Answer 7

Demo en vivo

Básicamente, simplemente verifica la posición del elemento para ver si está dentro de la ventana gráfica.

function checkIfInView(element){
    var offset = element.offset().top - $(window).scrollTop();

    if(offset > window.innerHeight){
        // Not in view so scroll to it
        $(''html,body'').animate({scrollTop: offset}, 1000);
        return false;
    }
   return true;
}