JS scrollIntoView 不使用焦点（）

Question

在一个函数中，我试图实现两件事：

1. 滚动到某个部分
2. 专注于输入

这是我的代码：

function search() {
  document.getElementById("searchbar").style.display = "block";
  document.getElementById("flex").style.display = "none";
  document.getElementById("books").scrollIntoView({behavior: 'smooth'});
  key();
};
function key(){
  document.getElementById("searchbox").focus();
};

滚动在这里不起作用。如果我删除“键”功能，它可以工作。

不需要单独的“键”功能，但我试过了。

id 为“searchbox”的输入被放置在“position:fixed”分区内。它在“书籍”部分之外。

Answer 1

您可以简单地颠倒调用这些方法的顺序。

function search() {
  document.getElementById("searchbox").focus(); 
  document.getElementById("books").scrollIntoView({behavior: 'smooth'});
};
document.getElementById("btn").onclick = search;

#books {
  margin-top: 300vh;
}

<button id="btn">search</button>
<input id="searchbox" value="#searchbox">
<div id="books">Some books</div>

调用Element.focus() 会自动使您的浏览器滚动到该元素。这样做，它将取消之前对scrollIntoView 的调用。通过颠倒调用顺序，scrollIntoView 将取消 focus' 滚动，这正是你想要的。