jQuery:如何使内容不可见并带有溢出:隐藏? [英] jQuery: How to get content not visible with overflow: hidden?

问题描述

我正在尝试将内容跨设置为950px/div的多个页面(div)，因此我可以正确地输出为pdf.

I'm trying to span content across multiple pages (divs) set at a height of 950px per div, so I can properly output to pdf.

我从一个div开始，该div使用overflow:隐藏来嵌套所有内容.理想情况下，我想使用jquery查找超出查看范围(隐藏)的内容，但是我看不到任何功能可以做到这一点. $ ...(':visible')仅适用于显示:无或可见性:隐藏...

I start off with one div which nests all of the content using overflow: hidden. Ideally I'd like to use jquery to find content which is out of the viewing scope (hidden), but I can't see any functionality to do this. $...(':visible') just applies to display: none or visibility: hidden...

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

The content on these pages is basic html markup (p, br, ol, ul, li, h1, h2). I've tried the route of looping these children elements and finding their offset from the top. The problem with this, is it gets extremely messy and complicated when you're trying to measure the distant of the element being looped to the top of the page when the subsequent pages have variable content height (there is a header block within each page which goes above the content).

想法?

推荐答案

您需要将每个元素的位置与文档的高度(body)进行比较:

You need to compare the position of each element to the height of the document (body):

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

此示例扫描每个元素并构建一个(完全)隐藏的元素数组:

This example scans each element and builds an array of elements that are hidden (completely):

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的标签未显示)

A blue container is set to 400px in height, with the overflow hidden. In the div, there are 22 p elements, numbered from 1 - 22. Some will be hidden (they don't fit). The code on the page will tell you how many elements are hidden (for me, I get 5; p tags 17 through 22 don't show up)

这篇关于jQuery:如何使内容不可见并带有溢出:隐藏?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！