如何检查元素是否在视口中（div，无窗口）_JavaScript

有什么方法可以检查指定的html元素是否在视口中-没有窗口但指定了div？ 我只找到了一个有意义的解决方案，但我无法使其成功。

根据这个问题

我在这里创建了一个示例： :

这是我的html代码：

<body style="overflow:hidden;">
<div id="outer" style="position:absolute;left:150px;top:20px;right:100px;bottom:30px;overflow:hidden;border:1px solid blue;">
    <div id="inner" style="position:relative;height:300px;border:1px solid red;width:100px;overflow-y:auto;overflow-x:hidden;">
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">1</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">2</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">3</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;background:yellow;" class="test" id="id1">4</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">5</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">6</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">7</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">8</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">9</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">10</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">11</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">12</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">13</div>
        <div style="position:relative;width:100%;height:30px;border:1px solid grey;" class="test">14</div>
    </div>
</div>
<div id="result" style="position:absolute;bottom:0px;overflow:hidden;border:1px solid black;height:20px;width:100%;"></div>
</body>

这是一个js函数

$(document).ready(function () {

    $.belowthefold = function (lookIn, elements, settings) {
        var fold = $(lookIn).height() + $(lookIn).scrollTop();
        return $(elements).filter(function () {
            return fold <= $(this).offset().top - settings.threshold;
        });
    };

    $.abovethetop = function (lookIn, elements, settings) {
        var top = $(lookIn).scrollTop();
        return $(elements).filter(function () {
            return top >= $(this).offset().top + $(this).height() - settings.threshold;
        });
    };

    $.rightofscreen = function (lookIn, elements, settings) {
        var fold = $(lookIn).width() + $(lookIn).scrollLeft() + $(lookIn).offset().width;
        return $(elements).filter(function () {
            return fold <= $(this).offset().left - settings.threshold;
        });
    };

    $.leftofscreen = function (lookIn, elements, settings) {
        var left = $(lookIn).scrollLeft();
        return $(elements).filter(function () {
            return left >= $(this).offset().left + $(this).width() - settings.threshold;
        });
    };

    $("#inner").scrollTop(100);

    var b = $.belowthefold("#inner", ".test", { threshold: 0 }).toArray();
    var t = $.abovethetop("#inner", ".test", { threshold: 0 }).toArray();
    var r = $.rightofscreen("#inner", ".test", { threshold: 0 }).toArray();
    var l = $.leftofscreen("#inner", ".test", { threshold: 0 }).toArray();


    var el = $("#id1")[0];

    var bS = "below the fold : ";
    for (var i = 0; i < b.length; i++) {
        bS += $(b[i]).html() + ",";
    }
    var tS = "above the top : ";
    for (var i = 0; i < t.length; i++) {
        tS += $(t[i]).html() + ",";
    }
    var rS = "right of screen : ";
    for (var i = 0; i < r.length; i++) {
        rS += $(r[i]).html() + ",";
    }
    var lS = "left of screen : ";
    for (var i = 0; i < l.length; i++) {
        lS += $(l[i]).html() + ",";
    }

    console.log(bS);
    console.log(tS);
    console.log(rS);
    console.log(lS);
});

我想做的是获取所有'.test'元素，这些元素当前在内部容器中是不可见的（或在目标解决方案中是部分不可见的，任何开关都会受到赞赏），并带有其位置信息。 结果应为：

褶皱以下：13，14

上方上方：1,2,3,4

屏幕右边：

屏幕左侧：

但是在这种特殊情况下，这些功能不起作用。 我尝试使用其他几种解决方案，但每个解决方案都将视口视为窗口。

你能解释我在做什么错吗？ 任何帮助将不胜感激。

您应该将div的位置与以下各项进行比较：视口大小和窗口边界。

大概是： if(div.top > (window.top + viewport.height )) {/*this is visible*/} else {/*this is not visible*/}

if((div.top **+ 50% of div.height**) > (window.top + viewport.height )) {/*this is visible*/}您甚至可以使其更具体（div的面积是多少？） if((div.top **+ 50% of div.height**) > (window.top + viewport.height )) {/*this is visible*/}

这篇文章提供了一些代码

$(document).ready(function() {
    // Get viewport height, gridTop and gridBottom
    var windowHeight = $(window).height(),
        gridTop = windowHeight * .3,
        gridBottom = windowHeight * .6;

$(window).on('scroll', function() {
    // On each scroll check if `li` is in interested viewport
    $('ul li').each(function() {
        var thisTop = $(this).offset().top - $(window).scrollTop(); // Get the `top` of this `li`

        // Check if this element is in the interested viewport
        if (thisTop >= gridTop && (thisTop + $(this).height()) <= gridBottom) {
            $(this).css('background', 'red');
        } else {
            $(this).css('background', 'gray');
        }
    });
});

}）;

如何检查元素是否在视口中（div，无窗口）

问题描述

1楼