Вопрос по html, scroll, javascript – Автопрокрутка до нижней части div

0

У меня есть div с переполнением, установленным для прокрутки, который, по сути, потоковой передачи данных строка за строкой файла. Я бы хотел прокручивать автоматически до конца div каждый раз, когда поток переполняется, но без использования кнопки «Нажмите здесь, чтобы пролистать до дна».

Я уже знаю оscrollTop = scrollHeight решение, но это требует какой-то триггер события на стороне клиента. Я не хочу, чтобы этот элемент был интерактивным; он должен прокручиваться сам по себе.

Есть ли способ добиться этого?

Ваш Ответ

3   ответа
1

Какой-то мой старый код спример выполнения это будет оставаться внизу при добавлении нового контента, если пользователь прокручивает его, он не будет больше его внизу.

var chatscroll = new Object();
chatscroll.Pane = 
    function(scrollContainerId)
    {
        this.bottomThreshold = 25;
        this.scrollContainerId = scrollContainerId;
    }

chatscroll.Pane.prototype.activeScroll = 
    function()
    {
        var scrollDiv = document.getElementById(this.scrollContainerId);
        var currentHeight = 0;

        if (scrollDiv.scrollHeight > 0)
            currentHeight = scrollDiv.scrollHeight;
        else 
            if (objDiv.offsetHeight > 0)
                currentHeight = scrollDiv.offsetHeight;

        if (currentHeight - scrollDiv.scrollTop - ((scrollDiv.style.pixelHeight) ? scrollDiv.style.pixelHeight : scrollDiv.offsetHeight) < this.bottomThreshold)
            scrollDiv.scrollTop = currentHeight;

        scrollDiv = null;
    }
0

смещение OffHeight, похоже, помогло.

Уверен, что scrollHeight пытается переместить его в конец высоты статического элемента, а не высоты области прокрутки.

var pane = document.getElementById('pane');
pane.scrollTop = pane.offsetHeight;
1

element.scrollTop = element.scrollHeight.

Если вы не знаете, когда элемент будет изменен, вы можете добавить опрашивающее устройство:

(function(){
    var element = document.getElementById("myElement");
    var lastHeight = element.scrollHeight;
    function detectChange(){
        var currentHeight = element.scrollHeight;
        if(lastHeight != currentHeight){
            element.scrollTop = currentHeight;
            lastHeight = currentHeight;
        }
    }
    detectChange();
    setInterval(detectChange, 200); //Checks each 200ms = 5 times a second
})();

Похожие вопросы