如何判斷元素滾動後是否可見？

確保滾動後元素的可見性

識別滾動隱藏的元素

透過AJAX 動態載入內容時，除非執行滾動，否則某些元素可能會保持隱藏狀態。確定它們在頁面當前可見部分中的可見性變得至關重要。

解

要檢查元素在滾動後是否完全或部分可見，請使用以下函數：

function isScrolledIntoView(elem) {
  var docViewTop = $(window).scrollTop();
  var docViewBottom = docViewTop + $(window).height();

  var elemTop = $(elem).offset().top;
  var elemBottom = elemTop + $(elem).height();

  return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop));
}

擴充實用函數

引入支援完全可見且部分可見的實用函數檢查：

function Utils() {}

Utils.prototype = {
  constructor: Utils,
  isElementInView: function (element, fullyInView) {
    var pageTop = $(window).scrollTop();
    var pageBottom = pageTop + $(window).height();
    var elementTop = $(element).offset().top;
    var elementBottom = elementTop + $(element).height();

    if (fullyInView === true) {
      return ((pageTop < elementTop) && (pageBottom > elementBottom));
    } else {
      return ((elementTop <= pageBottom) && (elementBottom >= pageTop));
    }
  }
};

增強用法

使用此實用函數增強程式碼：

var Utils = new Utils();

var isElementInView = Utils.isElementInView($('#flyout-left-container'), false);

if (isElementInView) {
  console.log('in view');
} else {
  console.log('out of view');
}

透過實作這些函數，您可以有效地偵測滾動後元素的可見性，並且做出相應的回應。

以上是如何判斷元素滾動後是否可見？的詳細內容。更多資訊請關注PHP中文網其他相關文章！