希望这对于那些没有 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 事件,并且考虑到我提到的变量的数学效果非常好,我认为我走在正确的道路上。 谢谢大家的意见!
x = 0; //horizontal coord
y = document.height; //vertical coord
window.scroll(x,y);
要滚动整个文档,请使用以下命令:
window.scrollTo(0, document.body.scrollHeight);
如果你只有一个可滚动的 div 或其他东西,那么过程会有所不同:
var obj = $('id');
obj.scrollTop = obj.scrollHeight;
for (i = 0; i < 100; i++) {
document.write("" + i + "<br />");
window.scroll(0,document.body.offsetHeight);
}
漂亮的 jQuery 函数可以完成这个工作
$('html,body').animate({ scrollTop: element.offset().top }, 'slow');
这对我有用,用它自动滚动到下拉菜单以使其成为焦点
这解释了设置时间间隔是什么 - 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>
obj.scrollTop = obj.scrollHeight;
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>