我有一个要求,当出现溢出时,能够找出当前可见的元素文本(可以是 div 或文本框)。
当用户上下滚动时,我需要更新可见文本列表。
我对使用什么元素没有限制,除了只有一部分文本可见,所以我很自然地想到了 div 或文本框。
HTML 部分:
<div id="box">
<p>1</p><p>2</p><p>3</p>
<p>4</p><p>5</p><p>6</p>
<p>7</p><p>8</p><p>9</p>
<p>10</p><p>11</p><p>12</p>
</div>
<div id="result">
Visible Items:
</div>
CSS 部分:
#box{
width: 100px;
height: 120px;
overflow: scroll;
background: yellow;
}
#result{
width: 400px;
height: 50px;
background: green;
}
jQuery:
$( "#box" ).scroll(function() {
$("#result").append("Hello");
});
在示例中,我最初想在绿色 div 中看到:“1”、“2”和“3”,但随着用户向下滚动,它将变为“2”、“3”、“4”等。
最佳答案
这个函数应该告诉你一个元素是否完全可见:
var isVisible = function(elem, container) {
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).outerHeight();
return elemTop >= 0 && elemBottom <= $(container).outerHeight();
}
如果您需要知道某物是否部分可见,这应该可行:
var isVisible = function(elem, container) {
var elemTop = $(elem).offset().top;
var elemBottom = elemTop + $(elem).outerHeight();
return elemBottom > 0 && elemTop < $(container).outerHeight();
}
这些假设我们只担心垂直滚动。
jsfiddle 分支在这里:
关于javascript - 识别具有溢出的元素的可见部分,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21288913/