jQuery - 当 onfocus = true 时停止自动滚动

Question

我有一个 div，它不断地传输数据，并具有自动滚动到底部的功能，从而始终将最新信息放在用户的视线中。

但是，我当前实现的问题是该元素不关心用户是否希望向上滚动并查看之前打印的行。一旦新数据发布，div 就会将滚动条拉回到底部。考虑到更新经常发生(~500 毫秒)，这对于希望闲暇时查看整个日志的用户来说可能会非常恼火。

理想情况下，这就是我想用这个 div 做的事情

• 当用户在 div 本身或滚动条内部点击 (overflow:auto) 时，自动滚动会立即禁用。
• 一旦用户点击外部，自动滚动就会重新启用。
• 首次加载页面时，默认情况下，div 设置为不聚焦(即，如果用户未单击任何位置，则会发生自动滚动)

代码:

<script type="text/javascript">
    $(function () {
        $("#testMonitor").everyTime(500, function () {
            $("#testMonitor").attr({ scrollTop: $("#testMonitor").attr("scrollHeight") - $('#testMonitor').height() });
        });
    });        
</script>

<script type="text/javascript">
    $("div#testMonitor").attr("tabindex", -1).focusin(function () {
        $("#testMonitor").attr({ scrollTop: $("testMonitor").height() });
    });
</script>

第一个 block 是我的自动滚动，它按预期工作。第二部分应该将scrollTop设置为onFocus时的“正常”高度。

如何修改我的 focusin 函数以使其按预期运行？

Answer 1

比您想象的容易。

1) 创建一个标志

var autoScrollEnabled = true;

2) 修改自动滚动，使其仅在 autoScrollEnabled 为 true 时运行

$(function () {
    $("#testMonitor").everyTime(500, function () {
        if (autoScrollEnabled == true) {
            $("#testMonitor").attr({ scrollTop: $("#testMonitor").attr("scrollHeight") - $('#testMonitor').height() });
        }
    });
});

3) 添加代码以在适当的情况下切换自动滚动

toggleAutoScroll();

function toggleAutoScroll() {
    autoScrollEnabled = !autoScrollEnabled; //! reverses the value, true becomes false, false becomes true
    if (autoScrollEnabled == true) { //scroll down immediately if a.s. is reenabled
        $("#testMonitor").attr({ scrollTop: $("#testMonitor").attr("scrollHeight") - $('#testMonitor').height() });
    }
}