Question

有没有办法检查指定的html元素是否在视口中 - 没有窗口但指定的div？我发现只有一个有意义的解决方案，但我不能让它适合我。

根据这个问题Check if element is visible in div

我在这里创建了一个示例：http://jsfiddle.net/jm91n80u/

这是我的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);
});

我想要做的就是全力以赴。测试＆＃39;在内部容器中当前不可见（或在目标解决方案中部分不可见，任何开关将被欣赏）的元素，其中包含有关其位置的信息。结果应该是：

低于折叠：13,14

位于顶部：1,2,3,4

屏幕右侧：

屏幕左侧：

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

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

Answer 1

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

粗略地说：if(div.top > (window.top + viewport.height )) {/*this is visible*/} else {/*this is not visible*/}

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

这篇文章提供了一些代码Check if element is between 30% and 60% of the viewport

$(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 个答案: