div距离页面底部只触发一次事件

要让div距离页面底部只触发一次事件，可以使用一个变量来记录是否已经触发过事件，然后在事件处理函数中进行判断。例如：

let isTriggered = false;

window.addEventListener('scroll', function() {
  const div = document.querySelector('div');
  const rect = div.getBoundingClientRect();
  const windowHeight = window.innerHeight;
  const distanceToBottom = windowHeight - rect.bottom;

  if (distanceToBottom >= 0 && !isTriggered) {
    // 触发事件
    console.log('div到达页面底部');
    isTriggered = true;
  }
});

在这段代码中，我们定义了一个`isTriggered`变量来记录是否已经触发过事件，默认为`false`。在滚动事件处理函数中，我们通过`getBoundingClientRect`方法获取div元素的位置信息，计算出它距离页面底部的距离`distanceToBottom`。如果`distanceToBottom`小于等于0，说明div已经到达页面底部，此时我们判断`isTriggered`是否为`false`，如果是，表示还没有触发过事件，就执行相应的操作，并将`isTriggered`设置为`true`，表示已经触发过事件。这样，当div再次到达页面底部时，由于`isTriggered`已经为`true`，事件处理函数就不会再执行了，从而实现了只触发一次事件的效果。