Me gustaría dibujar un cuadro <div> con altura, ancho y barras de desplazamiento fijos y registrar la ubicación de la vista desplazada. Encontré la función scrollTop pero no sé cómo obtener la ubicación de desplazamiento inferior.
Usaría estos 4 números para dibujar un <div> adentro.
Comenzando con su segunda pregunta: scrollTop es la posición vertical (en px) de la barra de desplazamiento, en relación con la posición superior. Entonces, si su barra de desplazamiento está en la parte superior, scrollTop = 0. Es lo mismo para scrollLeft, pero horizontal. Puede establecer estos valores a través de js para llevar la barra de desplazamiento a una determinada posición mediante programación. Entonces, si desea saber cuándo la barra de desplazamiento está en la parte superior, simplemente registre un detector de eventos para desplazarse y espere scrollTop = 0. Para verificar si la barra de desplazamiento está en la parte inferior, necesita un poco de cálculo ya que necesita conocer la altura de desplazamiento del contenedor (altura de desplazamiento - scrollTop = 0).
Consulte el siguiente código (usando jquery pero también funciona con js simple) que activa un evento cuando la barra de desplazamiento alcanza la posición inicial o final (esto es para desplazamiento horizontal, por lo que debe reemplazar "izquierda" con "superior" y "ancho" con "altura"):
$('#yourDivId').on('scroll', function () { if (scrollbarIsAtStart($(this))) { $(document).trigger("scrollbar.left"); } if (scrollbarIsAtEnd(this, $(this))) { $(document).trigger("scrollbar.right"); } }) const scrollbarIsAtStart = (jQuery) => { if (jQuery.scrollLeft() == 0) { return true; } return false; } const scrollbarIsAtEnd = (e, jquery) => { //Minus one, probably rounding issue!? if (jquery.width() + jquery.scrollLeft() >= e.scrollWidth - 1) { return true; } return false; }Entonces, hay dos eventos activados, uno para la barra de desplazamiento que alcanza la posición de inicio, uno para el final del contenedor. Ahora, puede escuchar estos eventos y manejarlos:
$(document) .on('scrollbar.left', {}, function (event) { //do whatever you want to do })Con respecto a su primera pregunta, no soy un experto en CSS, pero si observo la clase de respuesta de tabla de bootstraps (que permite el desplazamiento horizontal), se ve así:
.table-responsive { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }El desplazamiento vertical está habilitado de forma predeterminada si define una altura fija en su div y los datos exceden este tamaño. Por supuesto, puede anular el ancho con un valor fijo o un porcentaje diferente.