Question

我有一个带有溢出设置的div来滚动，这实际上是逐行地从文件中流出数据。我想在流溢出时自动滚动到div的底部，但不使用“点击此处滚动到底部”按钮。

我已经知道scrollTop = scrollHeight solution，但这需要在客户端进行某种事件触发。我不希望这个元素是互动的;它应该自己滚动。

有没有办法实现这个目标？

Answer 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
})();

Answer 2

我的一些带有running example的旧代码会在添加新内容时保留在底部，如果用户滚动它，则不会将其更多地添加到底部。

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

Answer 3

很多scrollHeight实现对我来说都不起作用，offsetHeight好像可以解决这个问题。

很确定scrollHeight尝试将其移动到静态元素高度的底部，而不是可滚动区域的高度。

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

自动滚动到div的底部

3 个答案: