jQuery:如何使用overflow:hidden显示内容不可见?

时间:2010-09-16 21:51:02

标签: jquery overflow hidden

我正在尝试跨多个页面(div)跨越内容,设置为每个div 950px的高度,因此我可以正确输出到pdf。

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

这些页面上的内容是基本的html标记(p,br,ol,ul,li,h1,h2)。我已经尝试了循环这些子元素并从顶部找到偏移量的路径。这个问题是,当你试图测量后续页面具有可变内容高度的元素被环绕到页面顶部的距离时,它会变得非常混乱和复杂(每个页面中都有一个标题块超越内容)。

想法?

1 个答案:

答案 0 :(得分:5)

您需要将每个元素的位置与文档的高度(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不显示)