暫停自動滾動的Javascript

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之前，檢查列表是否已滾動至底部。因此，該過程應該是：

1. 列表是否已滾動到底部？
2. 如果是這樣，那麼追加一個項目並滾動到底部。
3. 如果沒有，則追加一個項目，不要滾動到底部。

這是修訂後的功能：

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/

Answer 2

爲什麼不直接設置，當你滾動一個布爾值，並且如果在createItem功能

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; 
    } 
}