在 Javascript 后暂停自动滚动

Question

我在 div 中有一个 ul，它通过 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

为什么不在滚动时设置一个布尔值，并在 createItem 函数中设置一个 if

var autoScroll = true;
var scrollContainer = document.getElementById('list');

// set in the beginning
scrollContainer.scrollTop = scrollContainer.scrollHeight;

// bind this to the scroll event somehow
function onscroll(){
  autoScroll = scrollContainer.scrollTop === scrollContainer.scrollHeight;
}

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

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

Answer 2

您需要做的是在决定是否更改 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;
    }
}

下面是一个 fiddle 演示：https://jsfiddle.net/1devjdsb/

在 Javascript 后暂停自动滚动

Pause auto scrolling in Javascript

html

javascript

scroll

scrolltop