Fatal编程技术网
  • javascript/
  • Javascript 如何使用jquery在查看端口中获取当前查看div/div

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

javascript jquery html

Javascript 如何使用jquery在查看端口中获取当前查看div/div,javascript,jquery,html,Javascript,Jquery,Html,有没有办法从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&

有没有办法从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>


div1 div内容
div2 div内容
div3 div内容
div4 div内容
div5 div内容
div6 div内容
div7 div内容
div8 div内容
第9部分内容
假设
div3
，
div4
和
div5
都在查看端口中，但我不知道。有什么方法可以从jquery或JS获得这些信息吗

您可以创建一个帮助器来添加或删除这样的类

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)})

函数findAll（选择器、回调）{
//让nodesArray=Array.prototype.slice.call（document.querySelectorAll（选择器））；
让nodesArray=Array.from（document.querySelectorAll（selector））；
if（回调类型==“函数”）{
回调（nodesArray）；
}否则{
返回节点阵列；
}
}
函数（元素、类名、回调）{
findAll（元素、功能（els）{
文件。添加的文本列表器（“滚动”，输入视图，错误）；
addEventListener（'resize'，function（））{
intoView（）；
});
函数intoView（）{
els.forEach（函数（el）{
var rect=el.getBoundingClientRect（）；
var elemTop=rect.top；
var elemBottom=矩形底部；
//只有完全可见的元素返回true：
//变量isVisible=（elemTop>=0）和&（elemBottom=0；
if（isVisible==true&&typeof回调==“函数”）{
el.classList.add（类名称）；
回调（el）；
}否则{
el.classList.remove（类名）
}
})
}
})
}
//intoViewport（“.color”，“active”，函数（e）{console.log（e）}）
您可以创建一个帮助器来添加或删除这样的类

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)})

函数findAll（选择器、回调）{
//让nodesArray=Array.prototype.slice.call（document.querySelectorAll（选择器））；
让nodesArray=Array.from（document.querySelectorAll（selector））；
if（回调类型==“函数”）{
回调（nodesArray）；
}否则{
返回节点阵列；
}
}
函数（元素、类名、回调）{
findAll（元素、功能（els）{
文件。添加的文本列表器（“滚动”，输入视图，错误）；
addEventListener（'resize'，function（））{
intoView（）；
});
函数intoView（）{
els.forEach（函数（el）{
var rect=el.getBoundingClientRect（）；
var elemTop=rect.top；
var elemBottom=矩形底部；
//只有完全可见的元素返回true：
//变量isVisible=（elemTop>=0）和&（elemBottom=0；
if（isVisible==true&&typeof回调==“函数”）{
el.classList.add（类名称）；
回调（el）；
}否则{
el.classList.remove（类名）
}
})
}
})
}
//intoViewport（“.color”，“active”，函数（e）{console.log（e）}）
我很少插入我自己的库，但我不久前写了一个，它似乎可以满足您的需要。它在生产中使用，因此应该是可靠的

首先，为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>
如果您想监听不可见而不是可见性，可以将第一个参数更改为“hidden”

和

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

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

首先，为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>
如果您想监听不可见而不是可见性，可以将第一个参数更改为“hidden”

和

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

@Jeto据我所知，很抱歉，我们是否必须将div id传递给函数以检查它是否可见？我不想传递任何id，我必须了解视图端口中的所有div都是什么。这可以帮助@Jeto I很抱歉，据我所知，我们是否必须将div id传递给函数以检查它是否可见？我不想传递任何id，我必须了解查看端口中的所有div都是什么，这会有所帮助