所以我在我的jquery文件中實現了這個來檢測某個div部分是否在viewport中。

jQuery.fn.isInViewport = function($) {
    var elementTop = jQuery(this).offset().top;
    var elementBottom = elementTop + jQuery(this).outerHeight() / 2;
    var viewportTop = jQuery(window).scrollTop();
    var viewportHalf = viewportTop + jQuery(window).height() / 2;
    return elementBottom > viewportTop && elementTop < viewportHalf;
};

jQuery(window).on('load resize scroll', function($) {
    jQuery('.snappy').each(function() {
        var snapID = jQuery(this).attr('id');
        if (jQuery(this).isInViewport()) {
            jQuery('.sidenavitem').find("."+snapID).addClass("active");
            jQuery(this).addClass("in-view");       
        } else {
            jQuery('.sidenavitem').find("."+snapID).removeClass("active");
            jQuery(this).removeClass("in-view");
        }
    });
});

就其本身而言。on('load resize scroll ')函數工作，活動類被添加和刪除，但是當我添加這個CSS樣式時，scroll函數停止工作，只對第一個函數工作，因為有l(wèi)oad屬性

#main {
overflow-y: scroll;
  height: 100vh;
  
  scroll-snap-type: y proximity;
}

.snappy {
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 100vh;
}

我不確定這是我的CSS還是我的jQuery。

任何幫助都將不勝感激。

以下是我實現此功能的鏈接: https://dev.staging.idgadvertising.com/genesistint/

簡而言之，問題似乎出在#main元素的CSS屬性上。max-height: 100vh似乎和overflow-y: scroll玩的不太好。

通過設置max-height: 100vh，您基本上是說# main元素只能與視口高度一樣高。然后，通過設置overflow-y: scroll，您明確地指示瀏覽器總是顯示垂直滾動條，而不管內容是否溢出。

這導致了jQuery(window)中的沖突。on('load resize scroll '，函數($)在用戶滾動窗口時不觸發(fā)回調函數。

因此，正確的CSS可能是:

#main {
  max-height: 100vh;
  scroll-snap-type: y proximity;
}

或者(我覺得這個更好):

#main {
  scroll-snap-type: y proximity;
}

不需要overflow-y:scroll；在那里，因為頁面似乎總是高于視窗高度，所以窗口的滾動條總是自動顯示。

DIY調試指南:

首先，我會優(yōu)化JS代碼以便更好地調試。創(chuàng)建一個名為handleSideNav的單獨函數，用于處理側面導航。之后，你可以在窗口加載時應用這個函數，然后在有人滾動或調整窗口大小時應用同樣的函數。

注意console.log('觸發(fā)的事件:'，event)；用于調試的行——現在你可以看到哪個事件被觸發(fā)了，如果有任何事件被觸發(fā)的話。完成測試后，刪除這一行。

jQuery.fn.isInViewport = function($) {
    var elementTop = jQuery(this).offset().top;
    var elementBottom = elementTop + jQuery(this).outerHeight() / 2;
    var viewportTop = jQuery(window).scrollTop();
    var viewportHalf = viewportTop + jQuery(window).height() / 2;
    return elementBottom > viewportTop && elementTop < viewportHalf;
};

function handleSideNav(event) {
    console.log('Triggered event:', event);
    jQuery('.snappy').each(function() {
          var snapID = jQuery(this).attr('id');
          if (jQuery(this).isInViewport()) {
              jQuery('.sidenavitem').find("."+snapID).addClass("active");
              jQuery(this).addClass("in-view");       
          } else {
              jQuery('.sidenavitem').find("."+snapID).removeClass("active");
              jQuery(this).removeClass("in-view");
          }
      });
}

jQuery(window).on('load', handleSideNav);

jQuery(window).on('resize scroll', handleSideNav);

現在你可以刷新和滾動頁面，看看是否有任何事件被觸發(fā)。使用原始CSS，您可以在瀏覽器控制臺中看到，當您滾動頁面時，不會觸發(fā)滾動事件。這表明即使你在滾動，瀏覽器也不會注冊為窗口滾動，因此問題可能出在你的CSS上。