javascript - 滚动到 div 内的底部会触发警报(纯 JavaScript)

Question

我知道这里已经有解决方案，但大多数解决方案都是用 jQuery 编写的，JS 版本是基于窗口的，但我需要一个有效的方法

对于 div 和个人原因，我需要用纯 JavaScript 来完成此操作。所以基本上，当用户在 div 调用 a 内一直滚动到底部时，我需要触发警报，并且我不是指窗口的滚动条只是为了消除困惑。

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>-->

Answer 1

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>

如果您想要 0...1 中的值

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

1 将指示元素完全滚动:

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 并且您有百分比;)