AngularJS在keydown上移动滚动条

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

这里是我的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

来源

2017-05-31 Oscar321

尝试做'溢出-Y ：scroll'而不是'auto' – Baruch

@Baruch它没有工作。同样的问题。 – Oscar321

您需要使用JavaScript来滚动。当您的事件选择的项目低于container.scrollHeight时，您需要滚动至该项目。

container.scrollTop = (item_index + 1) * item_height

凡

item_index =在列表中的项目的索引。

item_height =下拉菜单中每个项目的高度。

container =国家DOM $('.countries')

来源

2017-05-31 04:28:11

'container.scrollHeight'会一路走下去，他只需要'（item_index + 1）* item_height' –

这是对的，相应地编辑了答案。 –

DataList控件：你可以使用HTML5 到处理你的问题，你没有必要自己做吧！它已经存在，所以使用它。

样品上：w3schools.com

OR一些指令可与DataList控件也一样，你可以用它们太angular-auto-complete

<input list="browsers"> 
 

 
<datalist id="browsers"> 
 
    <option value="Internet Explorer"> 
 
    <option value="Firefox"> 
 
    <option value="Chrome"> 
 
    <option value="Opera"> 
 
    <option value="Safari"> 
 
</datalist>

来源

2017-05-31 06:34:09 Maher

并非所有浏览器都支持此输入。 http://caniuse.com/#search=datalist –

AngularJS在keydown上移动滚动条

回答

相关问题