javascript - 检查滚动条是否在底部而不引起回流

Question

我有这个功能:

        is_bottom: function() {
            if (settings.scrollBottomOffset === -1) {
                return false;
            } else {
                var scroll_height, scroll_top, height;
                scroll_height = self[0].scrollHeight;
                scroll_top = self.scrollTop();
                height = self[0].offsetHeight;
                var limit = scroll_height - settings.scrollBottomOffset;
                return scroll_top + height > limit;
            }
        }

我在渲染 html 之前调用此函数来检查我的内容是否位于底部，因此在添加新内容后，我应该将元素上的滚动条移动到底部。

问题是它导致了我想要消除的回流，因为当我调用 is_bottom 时，该函数首先导致双重布局，然后在渲染新内容后第二次导致双重布局。

我认为，在存在大量渲染的相同情况下，这将稍微改进我的代码。即使是几毫秒也会产生影响。

所以我的问题是，还有其他方法来检查滚动条是否位于底部吗？我可以使用任何哨兵元素并使用 css 来定位它直到它被隐藏(例如使用 visibility: hide)。也许使用新的 itersection 或调整大小观察器，可以提高性能，但只能在少数浏览器中实现。

编辑: 我刚刚意识到我可以先检查我的内容是否有滚动条。多次重新渲染的代码根本不显示滚动条:

    function have_scrollbar() {
        return fill.outerWidth() !== self.outerWidth();
    }

问题是这也会导致回流，有没有办法检查元素是否有滚动条而不需要外壳回流？

Answer 1

如果我正确理解你的问题 - 你可以监听 body 元素上的滚动事件，以你在 enevt 处理程序中获得的事件 objcet 结束，你可以获得有关滚动状态的一些信息。