Question

我基本上希望浏览器在用户滚动时某个部分触及视口顶部时触发一个功能，但我不确定如何使用Vanilla JS做到这一点。

我已经找到了一些jQuery替代品，但是我只是想弄清楚Javascript目前是如何工作的，因此我不确定到底该从哪里开始或用什么谷歌搜索。

Answer 1

以下示例创建一个内部包含一个div的页面。滚动事件处理程序使用Element.getBoundingClientRect()来获取div相对于视口的位置，并在div处于视口的顶部边缘或上方时将msg记录到控制台。

var handlerFired;
window.addEventListener('scroll', function(e){
  var containerTop = document.querySelector('.container').getBoundingClientRect().top;
  if (containerTop <= 0) {
    if (!handlerFired) {
      handlerFired = 1;
      console.log('container at top of viewport or above');
    }    
  }
  if (containerTop > 0) {
    handlerFired = 0;
  }
});

body{
  height:2000px;
}
.container{
  width:300px;
  height:200px;
  border:5px solid red;
  position: absolute;
  top: 100px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

  <div class='container'> <p>scroll window ...</p> </div>

</body>
</html>

当部分使用Vanilla JS触摸视口顶部时，如何触发函数？

1 个答案: