Question

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

然而，我当前实现的问题是该元素不关心用户是否希望向上滚动并查看先前打印的行。一旦新数据为POSTed，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>

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

如何修改我的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() });
    }
}

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

1 个答案: