Skip to main content
2 de 2
se eliminaron 4 caracteres en el cuerpo; título editado
fredyfx
  • 13.2k
  • 11
  • 33
  • 65

¿Cómo limitar el scroll de un div?

Estoy haciendo un configurador, donde el cliente solicito que una tabla que se va armando dependiendo de lo que va escogiendo, lo acompañe mientras le da scroll, este es parte de mi HTML, donde se va armando imagen + tabla

HTML

<div id="sticky-anchor"></div>
      <div id="sticky" style="position: sticky;">
        <div id="no" style="display:none;">
          <img id="laimg" src="" style="position: absolute;width: 310px;height:230px;" />
        </div>
        <div id="results" style="position: absolute; width: 400px;">
        </div>
      </div>

Mi detalle es, estoy usando este codigo para permitir el scroll:

Javascript:

function sticky_relocate() {
    var window_top = $(window).scrollTop();
    var div_top = $('#sticky-anchor').offset().top;
    if (window_top > div_top) {
        $('#sticky').addClass('stick');
        $('#sticky-anchor').height($('#sticky').outerHeight());
    } else {
        $('#sticky').removeClass('stick');
        $('#sticky-anchor').height(0);
    }
}

$(function() {
    $(window).scroll(sticky_relocate);
    sticky_relocate();
});

var dir = 1;
var MIN_TOP = 200;
var MAX_TOP = 350;

function autoscroll() {
    var window_top = $(window).scrollTop() + dir;
    if (window_top >= MAX_TOP) {
        window_top = MAX_TOP;
        dir = -1;
    } else if (window_top <= MIN_TOP) {
        window_top = MIN_TOP;
        dir = 1;
    }
    $(window).scrollTop(window_top);
    window.setTimeout(autoscroll, 100);
}

Este funciona correctamente, sin embargo, se posiciona encima del footer de la pagina, hay forma de bloquear que no pase del footer?

Ya intente poniendo otro div anchor, tambien busque acerca del window.height, pero no veo forma de limitar el scroll.

Neobugu
  • 131
  • 6