Question

我正在使用angularJS进行自动完成。我的滚动条有问题。正如您在this gif中看到的那样，当我向下/向上按箭头时，滚动条保持不变。当我按下向下箭头键时，如何使用突出显示的选项移动滚动条？

这是我的css代码：

input {
  width: 300px;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 306px;
}
li {
  border: 1px solid grey;  
}
.countries {
  max-height: 100px;
  overflow-y: auto;
  overflow-x: hidden;
}
.countryIndex {
  background-color: #B2D7FE;
}

试试这个codepen

Answer 1

您需要使用JavaScript滚动。当您使用keydown活动选择的项目低于container.scrollHeight时，您需要滚动到该项目。

container.scrollTop = (item_index + 1) * item_height

哪里

item_index =列表中项目的索引。

item_height =您的下拉列表中每件商品的高度。

container =国家/地区DOM $('.countries')

Answer 2

DataList ：您可以使用 HTML5 来处理您的问题，而您无需亲自制作！它已经存在，所以请使用它。

示例：w3schools.com

OR 某些指令也适用于 datalist ，您也可以使用它们angular-auto-complete

public: true

AngularJS在keydown上移动滚动条

2 个答案: