ScrollIntoView（）不起作用-香草JS，為什么？

Question

我的想法是擁有一個簡單的搜索功能，人們可以在搜索框中鍵入文本，然后查看html中是否有與文本匹配的內容。 如果是這樣，匹配的部分（假設它可能在整個HTML頁面的后半部分，在您當前的屏幕/視口中看不到）將會跳轉/滾動到視圖中。 如果沒有，您將在#feedback標記中收到“找不到匹配項”消息。

HTML看起來像這樣：

<input id="search-text">
<p id="feedback"></p>
<p>title1</p>
<p>title2</p>
<p>title3</p>

JS是這樣的：

let searchText = ''

const titlesNodes = document.querySelectorAll('p')
const titles = Array.from(titlesNodes)

document.querySelector('#search-text').addEventListener('input', (e) => {
    searchText = e.target.value
    searchFunction()
})

const searchFunction = () => {
        const filteredTitles = titles.filter((title) => title.innerText.toLowerCase().includes(searchText.toLowerCase()) )
        const msg = document.querySelector('#feedback')
        msg.innerHTML = ''
        if (filteredTitles.length > 0){
            filteredTitles[0].scrollIntoView()
        } else {
            msg.textContent = 'No match found' 
        }
}

到目前為止，我能夠獲得“找不到匹配項”，但是當我鍵入僅在頁面后半部分的內容時，它不會跳轉到視圖。 我在Chromium和Firefox上都進行了測試，並且使用Linux。

我的代碼有什么問題？ 謝謝！

Answer 1

這是因為默認情況下，瀏覽器會在您鍵入時將<input>元素設置為屏幕。因此，您自己的調用會被瀏覽器的默認設置覆蓋。

不確定避免這種情況的最佳方法是什么...
您可能會嘗試在scrollIntoView的超時后調用scrollIntoView ，因此發生在輸入之一之后。 如果使用requestAnimationFrame計時功能，它應該在下一次繪制之前發生，因此您不會注意到其中一個輸入發生了。

 let searchText = ''; const titlesNodes = document.querySelectorAll('p') const titles = Array.from(titlesNodes) document.querySelector('#search-text').addEventListener('input', (e) => { searchText = e.target.value searchFunction() }) const searchFunction = () => { const filteredTitles = titles.filter((title) => title.innerText.toLowerCase().includes(searchText.toLowerCase())) const msg = document.querySelector('#feedback') msg.innerHTML = '' if (filteredTitles.length > 0) { requestAnimationFrame(() => { // wait just a bit filteredTitles[0].scrollIntoView() }); } else { msg.textContent = 'No match found' } } 

 #feedback { margin-bottom: 125vh } p { margin-bottom: 50vh } 

 <input id="search-text"> <p id="feedback"></p> <p>title1</p> <p>title2</p> <p>title3</p> 

Answer 2

嘗試更改：

- filteredTitles[0].scrollIntoView()
+ filteredTitles[0].scrollIntoView({alignToTop: true})

  document.querySelector('#search-text').addEventListener('input', (e) => {
      searchText = e.target.value
-     searchFunction()
+     setTimeout(searchFunction, 500)})
})