Question

我在ul中有一个div，它通过overflow: scroll进行垂直滚动，我不断向其中添加项目以在屏幕上复制简单的控制台日志。我还添加了逻辑，通过将scrollHeight值分配给列表的scrollTop来自动向下滚动。

我遇到的问题是当我手动滚动此列表时。它会跳到底部显示最新项目。

如果我手动滚动列表，有没有办法（只使用javascript）暂停自动滚动，类似于开发人员工具中的控制台日志的工作方式？

我尝试添加一个滚动事件监听器来尝试暂停此操作，但意识到在修改scrollTop时会触发此事件。

我自动滚动的代码是：

function createItem(message) {
    var item = document.createElement('li');
    item.className = 'item';
    item.textContent = message;

    list.appendChild(item);
    var scrollContainer = document.getElementById('list');
    scrollContainer.scrollTop = scrollContainer.scrollHeight;
}

Answer 1

您需要做的是在决定是否更改scrollTop之前检查列表是否已经一直滚动到底部。所以这个过程应该是：

列表是否已滚动到底部？
如果是，则附加一个项目并滚动到底部。
如果没有，则附加一个项目，然后向下滚动。

这是修正后的功能：

function createItem(message) {
    var item = document.createElement('li');
    item.className = 'item';
    item.textContent = message;

    var scrollContainer = document.getElementById('list');
    var shouldScroll = scrollContainer.scrollTop + scrollContainer.offsetHeight >= scrollContainer.scrollHeight;

    list.appendChild(item);
    if(shouldScroll) {
        scrollContainer.scrollTop = scrollContainer.scrollHeight;
    }
}

这是一个演示它的小提琴：https://jsfiddle.net/1devjdsb/

在Javascript中暂停自动滚动

1 个答案: