当前位置：文江博客话题详情

自动滚动到 div 底部

发布于 2024-12-08 01:08:43 字数 282 浏览 0 评论 0原文

我有一个溢出设置为滚动的 div，它本质上是逐行流式传输文件中的数据。我想在流溢出时自动滚动到 div 的底部，但不使用“单击此处滚动到底部”按钮。

我已经知道 scrollTop =scrollHeight 解决方案，但是这需要客户端进行某种事件触发器。我不希望这个元素是交互式的；它应该自行滚动。

有什么办法可以实现这一点吗？

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

梦情居士 2024-12-15 01:08:43

很多scrollHeight 实现对我来说不起作用，offsetHeight 似乎可以解决问题。

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

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

A lot of the scrollHeight implementations didn't work for me, offsetHeight seemed to do the trick.

Pretty sure that scrollHeight tries to move it to the bottom of the height of the static element, not the height of the scrollable area.

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

回复收藏 0 原文

梦行七里 2024-12-15 01:08:43

无法自动将元素滚动到底部。使用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
})();

There's no way to automatically scroll an element to the bottom. Use element.scrollTop = element.scrollHeight.

If you don't know when the element is going to resize, you could add a poller:

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

回复收藏 0 原文

亣腦蒛氧 2024-12-15 01:08:43

我的一些旧代码，其中包含运行示例，该代码将保留在添加新内容时的底部，如果用户滚动它不会将其添加到底部。

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

Some old code of mine with a running example that will stay at the bottom when new content is added, if the user scrolls it will not more it to the bottom.

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 原文

~没有更多了~