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

前端之家收集整理的这篇文章主要介绍了jQuery:如何使用overflow:hidden显示内容不可见?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图跨越多个页面(div)跨越内容设置在每个div 950px的高度,所以我可以正确输出到pdf.

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

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

想法?

解决方法

您需要将每个元素的位置与文档(正文)的高度进行比较:
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没有显示)

原文链接:https://www.f2er.com/jquery/181474.html

猜你在找的jQuery相关文章