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上移動滾動條

回答

相關問題