jQuery如何检查滚动区域内的元素是否可见

Question

好的，我使用以下代码来检查元素是否显示在屏幕上。

(function($) {

/**
    * Copyright 2012, Digital Fusion
    * Licensed under the MIT license.
    * http://teamdf.com/jquery-plugins/license/
    *
    * @author Sam Sehnert
    * @desc A small plugin that checks whether elements are within
    *     the user visible viewport of a web browser.
    *     only accounts for vertical position, not horizontal.
 */

$.fn.visible = function(partial) {

    var $t            = $(this),
        $w            = $(window),
        viewTop       = $w.scrollTop(),
        viewBottom    = viewTop + $w.height(),
        _top          = $t.offset().top,
        _bottom       = _top + $t.height(),
        compareTop    = partial === true ? _bottom : _top,
        compareBottom = partial === true ? _top : _bottom;

  return ((compareBottom <= viewBottom) && (compareTop >= viewTop));

};

})(jQuery);

然而，我想使用这段代码来检查它是否在可滚动的元素中可见。具体来说，我用于主要内容的main标签。我该如何修改代码，使其适用于我的可滚动元素？我不太确定该怎么做。我已经尝试将$w变量更改为$('main')，但似乎会出现异常行为。

- SimbaClaws

Answer 1

然而，我想使用这段代码来检查它是否在可滚动元素内可见。

该插件仅限于检测 body 的直接子元素。这几乎使得任何嵌套元素对该插件不可检测。请参阅此 解释。

- zer00ne

---

我明白了，所以这是一个目前还无法实现的限制吗？ 我是否有其他方法可以实现我想要的目标，或者我被卡住了？也许有不同的插件支持它吗？ - SimbaClaws

我手头没有关于那个特定功能的插件，但我记得有一篇文章（https://www.customd.com/articles/13/checking-if-an-element-is-visible-on-screen-using-jquery）是基于那个插件的。也许阅读那篇文章会让你更好地理解，离达成目标又更进了一步。同时，我会尝试挖掘一个基于可见性和滚动的旧项目。 - zer00ne

Answer 2

我知道这已经很老了，在 jQuery 仍然流行的时代，但现在似乎 JavaScript 有一个专门用于此目的的 Intersection Observer API。

请参阅 MDN：https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API

- SimbaClaws