為什么頁面在 javascript 上下跳動和焦點移動？

Question

我正在嘗試創建自定義 select 框。我能夠創建 select 框或下拉。 我在使用 ArrowUp 和 ArrowDown key 時遇到問題。

預期行為：當用戶按下ArrowDown焦點移動到下一個元素。

當前 Output ：焦點移到下一個元素，但頁面上下跳動看起來很糟糕。

這是我的代碼

https://codesandbox.io/s/youthful-solomon-yd2t2t?file=/index.html

 document.addEventListener("keydown", function(event) { if (event.key === "ArrowDown") { console.log("ArrowDown"); let $elm = query(document, "li.ro-select-item-active"); $elm.classList.remove("ro-select-item-active"); if ($elm.nextElementSibling) { $elm.nextElementSibling.classList.add("ro-select-item-active"); query(document, ".ro-select-item-active")? .scrollIntoView({ block: "center", inline: "nearest" }); } } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <select class="ro-select" name="opts" placeholder="Select an option"> <option value="1">First item</option> <option value="2">Second item</option> <option value="3">Third item</option> <option value="4">Last item</option> <option value="555">Last item</option> <option value="11">sssFirst item</option> <option value="22">ssc Second item</option> <option value="33">sdds Third item</option> <option value="44">Last item</option> <option value="5555">Last item</option> </select>

重現錯誤的步驟

1. 單擊文本字段
2. 彈出窗口將打開突出顯示第一個元素或突出顯示第一個 li 項目。
3. 按 ArrowDown 鍵將焦點移動到下一個元素。 但是頁面會上下跳躍。

Answer 1

易於修復。 將event.preventDefault()添加到您的代碼中以防止鍵在頁面中滾動。 從MDN了解更多信息。

在此處添加代碼：

if (event.key === "ArrowDown") {
   event.preventDefault(); // <--- !Add here!      
   console.log("ArrowDown");
   let $elm = query(document, "li.ro-select-item-active");
...

確保在使用"ArrowUp"等時也添加此行...