jQuery检查元素是否在可滚动的div中可见

yacmzcpb  于 2023-05-17  发布在  jQuery
关注(0)|答案(2)|浏览(134)

好了,我使用下面的代码来检查一个元素是否在屏幕上可见。

(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);

但是,我想使用这段代码,以便它检查它是否在可滚动元素中可见。特别是我用于我的主要内容的主要标签。我该如何修改这段代码,使其适用于我的可滚动元素?我不知道该怎么办。我已经尝试将$w变量改为$('main'),但这似乎表现得很奇怪。

mklgxw1f

mklgxw1f1#

但是,我想使用这段代码,以便它检查它是否在可滚动元素中可见。
该插件仅限于检测body的直接子对象。这使得插件无法检测到任何嵌套的元素。看这个解释。

yrefmtwq

yrefmtwq2#

我知道这真的很古老,在jQuery仍然是一个东西的时候,但现在似乎Javascript有一个专门用于此目的的交叉点观察器API。
参见MDN:https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API

相关问题