如何使用 jQuery 檢查 Div 元素在視窗中是否可見？

使用jQuery 檢查視窗中的元素可見性

在此故障排除場景中，目標是驗證類別為「media」的div元素是否存在" 出現在瀏覽器的可見視口中，無論滾動位置如何。jQuery-visible 插件已被認為是一個潛在的解決方案，但其實現仍不清楚。

要解決此問題，可以使用自訂jQuery 函數來確定元素在視窗內的可見性：

$.fn.isInViewport = function() {
  var elementTop = $(this).offset().top;
  var elementBottom = elementTop + $(this).outerHeight();

  var viewportTop = $(window).scrollTop();
  var viewportBottom = viewportTop + $(window).height();

  return elementBottom > viewportTop && elementTop < viewportBottom;
};

此函數透過考慮元素的頂部和底部邊界來計算元素相對於視窗的位置。將視口的邊界進行比較，確定元素是否部分或完全可見。調整視窗大小或捲動視窗時，此程式碼會檢查ID 為「Something」的元素是否可見。 ，此函數僅檢查元素的垂直位置，假設其水平對齊方式合適。

以上是如何使用 jQuery 檢查 Div 元素在視窗中是否可見？的詳細內容。更多資訊請關注PHP中文網其他相關文章！