javascript - 是否可以只提取可滚动 div 的可见内容？

Question

我有一个<div>与 overflow: auto;以及足够的内容需要垂直滚动。

有没有一种方法，使用PLAIN JAVASCRIPT，仅提取 <div> 中的可见内容(HTML) ？ (也就是说，仅基于当前滚动条位置在屏幕上可见的内容)。注意 - 容器不必是 <div> .

Answer 1

当然，只要您不介意对容器应用一些位置。应用定位后，您就可以获得子元素相对于其父元素的高度(和宽度)的偏移量，如果需要)，然后确定该元素是否可见。

这是我仅在 Chrome 中测试过的一个简单的 fiddle ，因此使用风险自负! ;)

http://jsfiddle.net/7nz1kfyx/

相关JS:

function isElementVisible (el, parent) {
    return (el.offsetTop + el.clientHeight) <= (parent.clientHeight);
}

您可以向返回的条件添加其他逻辑(例如，检查元素相对于其父元素的 offsetLeft 以查看它是否实际上可见...)

希望这有帮助!