將Div捕捉到滾動頁面頂部時遇到問題

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），而不是偵聽滾動事件並計算一堆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支持較舊的瀏覽器。