如何判断元素滚动后是否可见？

确保滚动后元素的可见性

识别滚动隐藏的元素

通过 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中文网其他相关文章！