时间戳

首页 > 解决方案 > 在滚动时将 div 捕捉到页面顶部时出现问题

javascript - 在滚动时将 div 捕捉到页面顶部时出现问题

问题描述

当 div 的顶部到达页面的特定部分时，我试图.item在滚动时将每个 div 捕捉到页面的顶部。现在这正在处理 div 一个但卡在那里

$(document).ready(function() {
  var windowHeight = $(window).height(),
    gridTop = windowHeight * .3,
    gridBottom = windowHeight * .6;

  $(window).on('scroll', function() {
    $('.item').each(function() {
      var thisTop = $(this).offset().top - $(window).scrollTop();
      if ((thisTop >= gridTop) && (thisTop <= gridBottom)) {
        console.log($(this).data('page'));
        $('html, body').animate({
          scrollTop: $(this).offset().top
        }, 700);
      }
    });
  });
});
body,
html {
  width: 100%;
  height: 100%;
}

.item {
  border-top: 2px dashed #cccc;
  border-bottom: 2px dashed #cccc;
  height: 100vh;
  display: -webkit-flex;
  -webkit-align-items: center;
  display: flex;
  align-items: center;
  justify-content: center
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='item'>
  <h1> Box 1 </h1>
</div>
<div class='item'>
  <h1> Box 2 </h1>
</div>
<div class='item'>
  <h1> Box 3 </h1>
</div>
<div class='item'>
  <h1> Box 4 </h1>
</div>
<div class='item'>
  <h1> Box 5 </h1>
</div>
<div class='item'>
  <h1> Box 6 </h1>
</div>
<div class='item'>
  <h1> Box 7 </h1>
</div>
<div class='item'>
  <h1> Box 8 </h1>
</div>
<div class='item'>
  <h1> Box 9 </h1>
</div>

标签： javascriptjquery

解决方案

这看起来可以更好地使用Intersection Observer (IO)来完成，而不是监听滚动事件并计算一堆 xy 坐标和位置。

使用 IO，您可以检查元素之间的关系或与视口的关系。由于您想检查与窗口相交，您可以从选项中排除该root选项：

let options = {
  rootMargin: '0px',
  threshold: 1.0
}

let observer = new IntersectionObserver(callback, options);

下一步是定义要观看的元素：

let targets = document.querySelectorAll('.item');
targets.forEach(target =>{
  observer.observe(target);
});

最后，您指定回调函数中发生的情况。在这里，您将检查元素实际相交的数量，并根据您的逻辑将其捕捉到顶部：

let callback = (entries, observer) => { 
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    // target element
  });
};

你可以使用w3c 的这个 polyfill来支持旧的浏览器。

推荐阅读