jQuery：如何通过溢出获取不可见的内容：隐藏？答案

【问题标题】：jQuery: How to get content not visible with overflow: hidden?jQuery：如何通过溢出获取不可见的内容：隐藏？
【发布时间】：2011-04-13 11:10:23
【问题描述】：

我正在尝试将内容跨越多个页面（div），每个 div 的高度设置为 950 像素，因此我可以正确输出为 pdf。

我从一个使用溢出嵌套所有内容的 div 开始：隐藏。理想情况下，我想使用 jquery 来查找超出查看范围（隐藏）的内容，但我看不到任何功能来执行此操作。 $...(':visible') 只适用于 display: none 或 visibility: hidden...

这些页面上的内容是基本的 html 标记（p、br、ol、ul、li、h1、h2）。我试过循环这些子元素并找到它们从顶部的偏移量的路线。这样做的问题是，当您尝试测量循环到页面顶部的元素的距离时，当后续页面具有可变的内容高度时，它会变得非常混乱和复杂（每个页面内都有一个标题块超出内容）。

想法？

【问题讨论】：

标签： jquery overflow hidden

【解决方案1】：

您需要将每个元素的位置与文档的高度进行比较（body）：

if ($("#elementOne").position().top > $("body").height()){
    // This element is hidden
}

此示例扫描每个元素并构建一个隐藏（完全）元素的数组：

var h = $("body").height();
var hiddenEls = new Array();

$("#container").find("*").each(function(){
    if ($(this).position().top > h)
        hiddenEls.push($(this));
});

~~请注意，这是未经测试的。~~

试试这个例子：

http://jsfiddle.net/wMPjJ/

蓝色容器的高度设置为400px，溢出隐藏。在div 中，有22 个p 元素，编号从1 到22。有些将被隐藏（它们不适合）。页面上的代码会告诉你隐藏了多少元素（对我来说，我得到5；p 标签 17 到 22 不显示）

【讨论】：

.position() 不是表示它是相对于定位的容器吗？
@Floyd Pink；是的，你是对的。但是，在这种情况下，这无关紧要，因为询问者只想检测被容器 div 隐藏的元素，其 overflow 设置为 hidden。如果整个页面本身有一个隐藏的溢出高度，那么您将使用offset() 而不是position()。