如何溢出自动对焦最后一个元素答案

【问题标题】：How to overflow auto focus last element如何溢出自动对焦最后一个元素
【发布时间】：2021-04-08 21:34:33
【问题描述】：

我开发 Todo 应用程序。如果添加到新元素，滚动条不关注页面底部。我该如何解决这个问题？

【问题讨论】：

您可以使用MutationObserver 来检测Todo 元素内部的变化，并在变化时更新元素的scrollTop。
当您滚动到页面末尾时，那里有什么内容？似乎“这是”在您的文本框下方和其他地方继续
当我添加项目时，滚动不会向下，它会一直保持向上
不是说你应该或不应该，而是问，你在这个项目中包含 jQuery 吗？
也许也显示你的代码。没有那个就不能推荐更改

【解决方案1】：

Element.scrollIntoView() 添加后即可使用。

例如：

function addElement(text) {
   // create a new element
   const element = document.createElement('p');
   element.innerText = text;

   // get the list where you want to add the element 
   const list = document.getElementById("myList");
   list.appendChild(element);

   // scroll to it
   element.scrollIntoView();
}

有关兼容性的更多信息，您应该查看https://developer.mozilla.org/de/docs/Web/API/Element/scrollIntoView，它被标记为实验性，但所有常见的浏览器都支持它。

【讨论】：