如何使用JavaScript实现滚动到div底部时自动触发指定函数？

当然可以通过JavaScript实现这个需求，目前主流有两种实现方式：

方式1：监听scroll滚动事件（兼容性更好） #

通过监听页面滚动事件，实时计算目标div的位置判断是否触达视口底部，适配所有新旧浏览器。
示例代码如下：

// 替换为你的目标div选择器
const targetDiv = document.querySelector('#target-div')

function handleScroll() {
  const rect = targetDiv.getBoundingClientRect()
  // 视口高度
  const viewportHeight = window.innerHeight
  // 目标div底部触达视口底部的判断条件
  if (rect.bottom <= viewportHeight) {
    // 替换为你需要执行的逻辑
    runYourFunction()
    // 如果只需要触发一次，执行后移除滚动监听即可
    window.removeEventListener('scroll', handleScroll)
  }
}

// 绑定滚动监听
window.addEventListener('scroll', handleScroll)
// 页面加载后先执行一次，避免目标div初始就位于视口底部无法触发
handleScroll()

注意：滚动事件触发频率很高，如果页面逻辑复杂建议加防抖逻辑优化性能。

方式2：使用Intersection Observer API（更推荐） #

这是浏览器原生提供的元素交叉观察API，不需要高频监听滚动事件，性能更优，是目前的主流实现方案。
示例代码如下：

// 替换为你的目标div选择器
const targetDiv = document.querySelector('#target-div')

const observer = new IntersectionObserver((entries) => {
  entries.forEach(entry => {
    // 元素进入视口时触发
    if (entry.isIntersecting) {
      // 替换为你需要执行的逻辑
      runYourFunction()
      // 如果只需要触发一次，执行后取消观察即可
      observer.unobserve(targetDiv)
    }
  })
}, {
  // 阈值配置为1，表示元素完全进入视口时触发，可根据需求调整
  threshold: 1.0,
  // 可配置rootMargin调整触发时机，比如rootMargin: '0px 0px 50px 0px' 就是提前50px触发
  rootMargin: '0px'
})

// 开始观察目标元素
observer.observe(targetDiv)

该API兼容所有现代浏览器，不需要额外处理位置计算逻辑，代码更简洁易维护。

内容的提问来源于stack exchange，提问作者Sahad