JS scrollIntoView не работает с focus ()

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();
};

Прокрутка здесь не работает. Если я удалю функцию «ключ», она заработает.

Нет необходимости в отдельной функции «ключ», но я пробовал.

Ввод с идентификатором «searchbox» помещается внутри положение: фиксированное "деление". Это вне раздела "книги".

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, что вам и нужно.