javascript - 检查带滚动条的 div 是否当前被用户读取

Question

我有一个带有滚动条的 div，其中包含一个日志文件。我通过运行一个向服务器发出 ajax 请求的计时器，每 5000 毫秒从服务器获取最新的日志。

但是，每次当我阅读并向下滚动 div 时，ajax 请求会使用新内容刷新 div，然后我会再次位于文本顶部，并且必须再次阅读全部内容。

所以我需要以某种方式检查用户当前是否正在阅读，如果他正在阅读，则清除间隔。

我知道我可以创建一个切换开关，以便用户可以手动清除间隔，但我不想尝试更智能的方法。

我的方法是检查计时器内部，div 是否聚焦，如果为 true，则清除 Interval。

        getLogs = setInterval
        (
            function()
            {       
                if ($("div#log").is(":focus"))
                {
                     clearInterval(getLogs);
                }
                else
                {
                     //ajax request
                }
            },
            5000
        );

但是 $("div#log").is(":focus") 始终返回 false。我也尝试过 $("div#log").is(":active") 但这没有定义。

Answer 1

我建议你使用jQuery的.scrollTop()方法来检查scrollTop !== 0，在这种情况下你可以假设用户已经在元素内滚动并且当前正在阅读它。

getLogs = setInterval
    (
        function()
        {       
            if ($("div#log").scrollTop() > 0)
            {
                 clearInterval(getLogs);
            }
            else
            {
                 //ajax request
            }
        },
        5000
    );

然后，您可以引入一些逻辑来在一定时间后恢复计时器(假设在某个时刻用户将继续前进 - 相当快，但不稳定的解决方案)或通过检查您的日志文件高度是否相同as .scrollTop() + 包含 div 高度，在这种情况下用户已读到文档末尾。