Question

有什么方法可以从jquery / js获取视图端口中的当前可见div吗？

假设我的html页面是这样的：

<html>
 <body>
  <div id = "bodyDiv">
   <div id="div1">div1 div content</div>
   <div id="div2">div2 div content</div>
   <div id="div3">div3 div content</div>
   <div id="div4">div4 div content</div>
   <div id="div5">div5 div content</div>
   <div id="div6">div6 div content</div>
   <div id="div7">div7 div content</div>
   <div id="div8">div8 div content</div>
   <div id="div9">div9 div content</div>
  </div>
 </body>
</html>

假设div3，div4和div5在视口中，但我不知道。有什么办法可以从jquery或JS中获取该信息？

Answer 1

您可以创建一个帮助程序来添加或删除此类

function findAll(selector, callback) {
    //let nodesArray = Array.prototype.slice.call(document.querySelectorAll(selector)); 
    let nodesArray = Array.from(document.querySelectorAll(selector));
    if (typeof callback == "function") {
        callback(nodesArray);
    } else {
        return nodesArray;
    }
}

function intoViewport(elements, classNames, callback) {
    findAll(elements, function(els) {

        document.addEventListener("scroll", intoView, false);
        window.addEventListener('resize', function() {
            intoView();
        });

        function intoView() {
            els.forEach(function(el) {

                var rect = el.getBoundingClientRect();
                var elemTop = rect.top;
                var elemBottom = rect.bottom;

                // Only completely visible elements return true:
                //var isVisible = (elemTop >= 0) && (elemBottom <= window.innerHeight);
                // Partially visible elements return true:
                var isVisible = elemTop < window.innerHeight && elemBottom >= 0;

                if (isVisible == true && typeof callback == "function") {
                    el.classList.add(classNames);
                    callback(el);
                } else {
                    el.classList.remove(classNames)
                }
            })
        }

    })
}
//intoViewport(".color", "active", function(e) { console.log(e)})

Answer 2

很少会插入我自己的库之一，但不久前我写了一个库，它似乎可以满足您的需求。它用于生产中，因此应该可靠。

首先，给HTML元素几个类：

<div id="div1" class="gocek pct-50">div1 div content</div>
<div id="div2" class="gocek pct-50">div2 div content</div>
<div id="div3" class="gocek pct-50">div3 div content</div>

gocek在库中注册元素（称为gocek.js）。 pct-50告诉gocek当该元素变得至少50％可见（或根据需要变为不可见）时通知您。您可以将此百分比更改为任何您喜欢的值；因此要检查某个元素是否完全可见（或不可见），可以使用pct-100。

然后使用JavaScript：

gocek.on('visible', 'div', () => alert('callback')); //<-- all DIVs
gocek.on('visible', '#div3', () => alert('callback')); //<-- specific DIV

如果您想听不可见而不是可见，可以将第一个参数更改为“隐藏”。

Here's a fleshed-out Fiddle和here's the unminified source code。

很遗憾，目前没有适当的文档，但是小提琴应该为您提供足够的指导。

如何使用jquery在视图端口中获取当前查看div / div

2 个答案: