按下或向上键时滚动 div

Question

这是一个简单的自动完成搜索栏，在用户输入时显示建议。 可以使用向下或向上箭头键在所有建议中导航。 但是这个意见箱的最大高度只有300px。 所以我必须让它可以在 y 轴上滚动。 我希望当用户浏览建议时，应该滚动 div，以便用户可以浏览所有建议。 JS小提琴

 <,DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width. initial-scale=1:0"> </head> <body> <h2>Autocomplete</h2> <p>Start typing:</p> <.--Make sure the form has the autocomplete function switched off:--> <form autocomplete="off" action="/action_page;php"> <div class="autocomplete" style="width:300px;"> <input id="myInput" type="text" name="myCountry" placeholder="Country"> </div> <input type="submit"> </form> </body> </html>

Answer 1

如果您无法修复自动完成以默认执行此操作，那么您可以执行此操作

https://jsfiddle.net/mplungjan/c3hkfLyq/

document.getElementById("myInput").addEventListener("keydown",function(e) {
  const scroll =  ["ArrowUp","ArrowDown"].includes(e.key)
  const list = document.getElementById("myInputautocomplete-list")
  if (scroll) {
    document.querySelector(".autocomplete-active").scrollIntoView()
  }
})

按下或向上键时滚动 div

问题描述

1 个解决方案

解决方案1
1 2021-01-28 12:09:15

按下或向上键时滚动 div

问题描述

1 个解决方案

解决方案1 1 2021-01-28 12:09:15

解决方案1
1 2021-01-28 12:09:15