溢出隱藏的jQuery選擇器

我在<div>內有幾個<p>元素。 <div>有overflow-y:auto;，除非您向下滾動，否則它隱藏了一些<p>元素。參見http://jsfiddle.net/qnuxs/1/溢出隱藏的jQuery選擇器

如何可以寫一個jQuery選擇僅選擇<p>元素完全（不是部分）可見，而不是從圖具有溢出隱藏。

因此，從我提供的jsfiddle示例中，選擇器應該給我第一個2 <p>'s（000和111），因爲它們是唯一完全可見的標籤。

注意：並非所有<p>標籤都必須具有相同的高度。身高可以變化。

來源

2011-03-13 Pinkie

在任何情況下，它們都不是可見的兩件事。如果文字大小與？混淆？ – BoltClock 2011-03-13 04:28:43

@bolt我想選擇完全可見的p。如果沒有完全查看，那麼選擇器將不會返回任何內容。 – Pinkie 2011-03-13 04:29:54

下面是它的核心：

http://jsfiddle.net/qnuxs/5/

編輯：我要更充實它，但RSP打我太吧。

來源

2011-03-13 05:04:20 aptwebapps

謝謝+1。我對你的榜樣感到更舒適。 – Pinkie 2011-03-13 08:16:21

感謝和更新版本解決了javaScript錯誤：http://jsfiddle.net/qnuxs/118/ – QMaster 2017-01-19 15:05:10

您可以使用自己的.filter（）函數做到這一點，例如：

var st = $('div').scrollTop(), 
    sh = $('div').height(), 
    sb = st + sh - 1; 

$('p').css({ 
    background: '#ccc' 
}); 
$('p').filter(function() { 
    var $this = $(this), 
     h = $this.height(), 
     t = $this.position().top, 
     b = t + h - 1; 
    return (t >= st && b <= sb); 
}).css({ 
    background: 'red' 
});

觀看演示：http://jsfiddle.net/qnuxs/3/

每五秒鐘它使可見段落紅色。它等待5秒鐘，以便您可以滾動並查看剩餘段落不是紅色。

另一個演示：在滾動http://jsfiddle.net/qnuxs/4/

此版本更新的顏色。

請注意，計算似乎是不正確的，所以它的幾個像素關閉，但它應該足以讓你開始。您可能需要使用.innerHeight（）作爲div，或者更改其他的東西，但這是一個想法：獲取滾動位置和div高度來計算可見部分的頂部和底部，並將這些值與頂部和底部座標（相對到div），並讓你的過濾器只選擇正確範圍內的那些。

來源

2011-03-13 05:00:52 rsp

感謝您輸入+1。 – Pinkie 2011-03-13 08:15:37

溢出隱藏的jQuery選擇器

回答

相關問題