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.