如何实现滚动HTML元素（含section-2）时调用指定函数？

要实现滚动到或经过指定元素时触发函数，可以通过监听window的滚动事件，结合目标元素的位置判断来完成。针对你需要监听id为section-2元素的场景，示例代码如下：

window.addEventListener("scroll", function() {
  var elementTarget = document.getElementById("section-2");
  if (window.scrollY > (elementTarget.offsetTop + elementTarget.offsetHeight)) {
      alert("你已经滚动过第二个区块了");
  }
});

代码说明： #

• 监听window的scroll事件，每次页面滚动时触发回调函数
• 通过document.getElementById("section-2")获取目标元素
• 判断当前滚动的垂直距离（window.scrollY）是否超过目标元素的底部位置（元素顶部偏移量+元素自身高度），满足条件则执行预设逻辑（示例中用alert提示）

如果需要在元素进入可视区域时触发函数，而非滚动过后，可以调整判断条件：

window.addEventListener("scroll", function() {
  var elementTarget = document.getElementById("section-2");
  var elementTop = elementTarget.offsetTop;
  var elementBottom = elementTop + elementTarget.offsetHeight;
  var currentScrollBottom = window.scrollY + window.innerHeight;

  if (currentScrollBottom > elementTop && window.scrollY < elementBottom) {
      console.log("section-2 已进入可视区域");
  }
});

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