Question

当div的顶部到达页面的特定部分时，我试图将每个div .item捕捉到滚动页面的顶部。现在这正在处理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>

Answer 1

这似乎比使用Intersection Observer (IO)更好，而不是听滚动事件并计算一堆x-y坐标和位置。

使用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
  });
};

您可以使用此polyfill from w3c支持较旧的浏览器。

将Div捕捉到滚动页面顶部时遇到问题

1 个答案: