Question

我在我的应用中的网页视图中显示了一些HTML（它是iOS应用中的WKWebView，但由于在多个平台上使用相同的HTML / JavaScript，因此该部分无关紧要）。 Web视图的外部是用户可以说的方式＆＃34;下一页＆＃34;。为此，我想将文档滚动一个屏幕高度。这非常简单，我可以轻松地做到这一点并且效果很好。

问题在于，如果最后一条可见线在一个＆＃34;页面之间分开＆＃34;接下来，您将在一页上看到该行的上半部分，在下一页上看到下半部分。这很难理解。理想情况下，我想通过渲染线遍历HTML文档并找到完全可见的最后一行，然后滚动以使之后的行位于屏幕顶部。当然，这假定没有表格，图像，浮动元素等，以使构成＆＃34;线＆＃34;的定义复杂化，但如果我能先解决更简单的案例，我可以处理。

我可以迭代DOM中的段落并为那些找到边界矩形，但是没有看到明显的方法来进一步分解它。我可以想象一个解决方案，我用<span>在我的HTML中包装每个单词，然后迭代那些查看位置和高度的人来确定屏幕底部的位置，但听起来效率很低。

我可以控制显示文档中的CSS和JavaScript（所有文档都使用相同的CSS和JavaScript，这是在运行时添加的），如果必须的话，可以在运行时对HTML进行修改，但性能显然是这个问题所以如果我不这么做的话，我不想用HTML显示很多东西。

如果不添加<span>标签，我强烈怀疑这是不可能的，如上所述。还有其他建议吗？

Answer 1

我会浏览所有段落（主要是p，但也可以考虑其他标签），得到它们的顶部偏移量，并找到在可视范围内仍然具有其顶部偏移量的最后一个。这应该是执行受控制的＆＃34;页面向下＆＃34;之后的顶部段落。操作。

以下是一些依赖jQuery返回该元素偏移量的代码：

function offsetForNextPage() {
    var bottom = $(window).scrollTop() + $(window).height();
    var result = $(window).scrollTop() + $(window).height() * 0.75; // minimum scroll amount
    $('p, span, div').each(function(idx) {
        if ($(this).offset().top >= bottom) {
            return false;
        }
        result = Math.max($(this).offset().top, result);
    });
    return result;
}

您当然可以添加要包含在此计算中的标记。请注意，如果找不到合适的元素，或者它会导致被认为太小的偏移量，则返回最小偏移量。上面的函数已将最小值设置为当前偏移量加上视口高度的75％。

以下是空格键触发向下翻页时的外观：

$(document).keydown(function (e) {
    if (e.which === 32) {
        e.preventDefault();
        $('html, body').animate({
            scrollTop: offsetForNextPage()
        }, 1000);
    }
});

这是fiddle。

注意：要$(window).height()提供正确的值，您必须在html页面的开头有一个有效的文档类型声明，例如：

<!doctype html>

如何在浏览器呈现的HTML文档中找到最底层文本的位置

1 个答案: