Sé que ya hay soluciones aquí, pero la mayoría de las soluciones están escritas en jQuery y la versión JS se basa en la ventana, pero necesito un método que funcione

Por div y por razones personales, necesito hacer esto en JavaScript puro. Entonces, básicamente, necesito que se active una alerta cuando un usuario se desplaza hasta el final dentro de una llamada div a y no me refiero a la barra de desplazamiento de la ventana solo para aclarar la confusión.

document.querySelector('#a').addEventListener('scroll',scrollTrigger);

function scrollTrigger(){
  if(???){
    alert('End of scroll');
  }
}
#a{
  background-color: red;
  height: 500px;
  width: 500px;
  overflow: auto;
}
<div id='a'>
  <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
</div><!--</a>-->
2
user9375528 14 sep. 2018 a las 11:54

3 respuestas

La mejor respuesta

El elemento está "en la parte inferior" cuando Element.scrollTop + Element.clientHeight es igual a Element.scrollHeight.

document.querySelector('#a').addEventListener('scroll',scrollTrigger);

function scrollTrigger(e) {
    const a = e.currentTarget;
  
    // use greater than or equal to be sure.
    if (Math.ceil(a.scrollTop) + a.clientHeight >= a.scrollHeight) {
        alert('End of scroll');
    }
}
#a{
  background-color: red;
  height: 500px;
  width: 500px;
  overflow: auto;
}
<div id='a'>
  <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
   <h1>a</h1>
</div><!--</a>-->
1
David 14 sep. 2018 a las 13:48
document.querySelector('#a').addEventListener('scroll', scrollTrigger);

function scrollTrigger() {

  var el = this;
  var sc = el.scrollHeight - el.clientHeight - el.scrollTop;
  console.clear(); console.log(sc)

  if (sc === 0) {
    console.log('End of scroll');
  }
}
#a {
  height: 180px;
  overflow: auto;
}
<div id='a'>
  <h1>a---</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a---</h1>
</div>

Si, en cambio, desea valores de 0...1

var sc =  el.scrollTop / (el.scrollHeight - el.clientHeight );

1 indicará que el elemento se desplazó completamente:

document.querySelector('#a').addEventListener('scroll', scrollTrigger);

function scrollTrigger() {

  var el = this;
  var sc = el.scrollTop / (el.scrollHeight - el.clientHeight);
  console.clear(); console.log(sc)

  if (sc === 1) {
    console.log('End of scroll');
  }
}
#a {
  height: 180px;
  overflow: auto;
}
<div id='a'>
  <h1>a---</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a</h1>
  <h1>a---</h1>
</div>

* 100 y tienes porcentajes;)

3
Roko C. Buljan 14 sep. 2018 a las 09:16

Prueba esto

window.onscroll = function(ev) {
    if ((window.innerHeight + window.scrollY) >= document.body.scrollHeight) {
        // you're at the bottom of the page
         console.log("Bottom of page");
     }
};
0
duddu venkatesh 14 sep. 2018 a las 08:59