Javascript机制自动滚动到不断增长的页面的底部?

问题描述 投票:0回答:7

希望这对于那些没有 Javascript 时间的人来说是一个简单的答案......

我有一个日志文件,正在由脚本监视,该脚本将日志中的新行提供给任何连接的浏览器。 一些人评论说,他们希望看到的更多是“tail -f”行为 - 最新的行将始终位于浏览器页面的底部,直到查看者向上滚动以查看某些内容。 滚动回到底部应该会返回到自动滚动行为。

我对这个问题的 google 删除 - 希望 - 只是因为对 javascript 一无所知,因此不知道要搜索哪些关键字。 我不需要完整的解决方案 - 只需要一个“足够接近”的解决方案,让我可以直接动手。

编辑:

我一直在尝试scrollTop/scrollHeight的想法,但显然错过了一些东西。 我对 Javascript 几乎没有做过任何事情,所以我可能又问了非常低级的问题:

<html><body>
<script type="text/javascript">
for (i=0; i<100; i++)
{
    document.write("" + i + "<br />");
    document.scrollTop = document.scrollHeight;
}
</script>
</body></html>

这是众多排列之一。 显然,我无法在 JavaScript 中逐行输出日志,但我只是想看看正确的行为。 我这里缺少什么链接?

再次编辑: 这已经变成了一个比我最初预期的更有趣的问题。 使用 window.scroll 的代码建议确实可以解决问题。 我开始尝试限制滚动仅在浏览器位于文档正文底部时发生。 这在理论上很容易做到,但在实践中却遇到了障碍:

每次从服务器获取新文本时,正文的大小都会增加,并且当前的滚动位置不再位于文档的底部。 您无法再区分(使用scrollHeight、clientHeight 和scrollTop)用户是否已向上滚动或文本是否刚刚超出了他们的视野。

我认为,如果这行得通,我将不得不承诺让自己在用户滚动时触发一个 JS 事件,并在滚动位于窗口底部上方时关闭滚动,但将其重新打开如果它们已向下滚动到实际上位于视图底部的位置。 我正在查看 onScroll 事件,并且考虑到我提到的变量的数学效果非常好,我认为我走在正确的道路上。 谢谢大家的意见!

javascript browser scroll
7个回答
13
投票
x = 0;  //horizontal coord
y = document.height; //vertical coord
window.scroll(x,y);

7
投票

要滚动整个文档,请使用以下命令:

window.scrollTo(0, document.body.scrollHeight);

如果你只有一个可滚动的 div 或其他东西,那么过程会有所不同:

var obj = $('id');
obj.scrollTop = obj.scrollHeight;

4
投票
for (i = 0; i < 100; i++) {
    document.write("" + i + "<br />");
    window.scroll(0,document.body.offsetHeight);
}

4
投票

漂亮的 jQuery 函数可以完成这个工作

$('html,body').animate({ scrollTop: element.offset().top }, 'slow');

这对我有用,用它自动滚动到下拉菜单以使其成为焦点


1
投票

这解释了设置时间间隔是什么 - http://www.w3schools.com/jsref/met_win_setinterval.asp

这解释了什么是设置超时 - http://www.w3schools.com/jsref/met_win_settimeout.asp

这将使用 javascript 滚动页面,并在 6 秒后停止

    <script type = "text/javascript" >

    var x;
    function autoscroll(){
    self.scrollBy(0,x)
    }

    function playautoscroll(){
    x = 1;
    setInterval('autoscroll()',0.01);
    stop();}

    function onetozero(){
    x=0;
    }

    function stop(){
    setTimeout ("onetozero()",6000);
    }
    window.onload=playautoscroll

    </script>

0
投票
obj.scrollTop = obj.scrollHeight;

0
投票

我看到没有提到

MutationObserver
api 允许跟踪页面的变化并在 dom 被修改时向下滚动。示例:

  <div id="content" style="height: 300px; overflow-y: auto; border: 1px solid black; padding: 10px;">
        <p>Initial content</p>
    </div>
    <button onclick="addContent()">Add Content</button>

    <script>
        // Function to add content to the container
        function addContent() {
            const contentDiv = document.getElementById('content');
            const newParagraph = document.createElement('p');
            newParagraph.textContent = 'New content added';
            contentDiv.appendChild(newParagraph);
        }

        // Function to scroll to the bottom
        function scrollToBottom() {
            const contentDiv = document.getElementById('content');
            contentDiv.scrollTop = contentDiv.scrollHeight;
        }

        // Using MutationObserver to detect content changes
        const observer = new MutationObserver(() => {
            scrollToBottom();
        });

        const targetNode = document.getElementById('content');
        const config = { childList: true, subtree: true };

        // Start observing the target node for changes
        observer.observe(targetNode, config);
    </script>
© www.soinside.com 2019 - 2024. All rights reserved.