Question

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

滚动到某个部分
关注输入

这是我的代码：

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'滚动。

JS scrollIntoView无法与focus（）一起使用

1 个答案: