Javascript 在溢出隐藏中隐藏零件视图文字

我正在制作bookReader，一个页面将适合用户视口。对于这种方法，我使用div

<div id="book">Long text...</div>

然后，我提供了仅使用按钮next和prev滚动此元素的功能。当用户点击下一步按钮时，它会像这样滚动

$('#next').on('click',function(){
    $('#book').scrollTop($('#book').scrollTop() +  $('#book').height());
});

但我有问题。用户有时会看到部分文本行。我如何检查每页的最后一行文字是否显示为断开，如果他断开了，如何隐藏这些文字。我不想改变内容。我需要一个功能，将检查每一页，如果它包含该部分的文本，如果这有该部分的文本，隐藏他在顶部的元素，应该隐藏

演示：我用红色显示我需要找到和隐藏的东西

演示2：它可以包含任何内容（标题标签、img、代码等）

---

请注意，使所有的

线条高度一致

不是解决方案。更改内容样式也不是解决方案。

i您应该如何设置每个文本行的固定

行高，并将容器高度固定为每个文本行的多个高度。这应该会有所帮助

看看这个：
这是什么意思？仅滚动到红色突出显示的顶部？无更改滚动，无更改内容，我需要的功能将检查是否有该部分文本，如果通过在顶部元素上制作隐藏内容来隐藏他，我尝试过类似的操作，但如果书中包含
h1、h2、img
或类似标记的内容，而且这种方法并不总是好的，也不灵活。当我尝试从移动设备读取数据时会发生什么情况？因此，另一种解决方案是在容器的顶部/底部添加淡入/淡出渐变。没问题，它包含h1、h2或其他任何内容。只需在每个元素上强制使用#book*{line height:…}。对于图像，您可以尝试将其缩放到特定高度。在桌子上也是一样，我想要这样的东西，但我怎么知道“渐变到”的高度呢。我无法更改内容和内容样式。
$('#next').on('click',function(){
    $('#book').scrollTop($('#book').scrollTop() +  $('#book').height());
});