鍵盤事件不會滾動我已代碼下拉

Question

的滾動條類似下面

https://plnkr.co/edit/LG8cOx?p=preview

eventHandler(event) { 
} 

以上是funstion處理代碼中的鍵盤事件。

我給出了鍵盤事件來選擇元素。它工作正常。早些時候，我沒有在下拉列表中的滾動條。現在，我有滾動條，當我滾動超出可見範圍時，滾動條不會移動。無論如何，使用鍵盤事件啓用滾動？

Answer 1

我已經創建了此working demo從md-autocomplete滾動列表中獲取代碼引用。

就像我們手動處理突出顯示上下鍵的選項一樣，滾動也需要手動處理。請根據您的要求調整li,dropdown面板，OPTION_HEIGHT和PANEL_HEIGHT的高度。

在這裏，我只添加了需要滾動工作的新代碼。所有的贓物新線都清楚地標註了評論。

component.ts：

@ViewChild('panel') panel: ElementRef; 

const OPTION_HEIGHT = 36; 

const PANEL_HEIGHT = 96; 

eventHandler(event) { 
    if (event.keyCode == 40) { 
     event.stopPropagation(); 
     this.SearchDropDown = true; 
     if(this.focusedIdx >= -1 && (this.focusedIdx < this.mockdata.length)){ 
      this.focusedIdx++; 
      this._scrollToOption(this.focusedIdx); 
     } 
     else{ 
      this.focusedIdx = 0; 
      this._scrollToOption(this.focusedIdx); 
     } 
    } 
    if (event.key == "ArrowUp") { 
     event.stopPropagation(); 
     this.SearchDropDown = true; 

     if(this.focusedIdx > -1 && (this.focusedIdx != 0)){ 
      this.focusedIdx--; 
      this._scrollToOption(this.focusedIdx); 
     } 
     else{ 
      this.focusedIdx = this.mockdata.length - 1; 
      this._scrollToOption(this.focusedIdx); 
     } 
    } 

    if (event.code == "Enter" && this.focusedIdx > -1){ 
     event.stopPropagation(); 
     this.selectDropdown(this.mockdata[this.focusedIdx]); 
    } 
} 

_getScrollTop(): number { 
    let x = this.panel.nativeElement.scrollTop; 
    return x; 
} 

_setScrollTop(scrollTop: number): void { 
    console.log("St: " + this.scrollTop); 
    if (this.panel) { 
    this.panel.nativeElement.scrollTop = scrollTop; 
    } 
} 

private _scrollToOption(activeItemIndex): void { 
    const optionOffset = activeItemIndex * this.OPTION_HEIGHT : 0; 
    const panelTop = this._getScrollTop(); 

    if (optionOffset < panelTop) { 
    this._setScrollTop(optionOffset); 
     } else if (optionOffset + this.OPTION_HEIGHT > panelTop + this.PANEL_HEIGHT) { 
    // Scroll down to reveal selected option scrolled below the panel bottom 
    const newScrollTop = 
     Math.max(0, optionOffset - this.PANEL_HEIGHT + this.OPTION_HEIGHT); 
     this._setScrollTop(newScrollTop); 
    } 
} 

HTML：

<!-- ADD #panel here --> 
<ul class="chosen-results custom-selectbox-list-cont customized-dropDown-active nav" #panel> 
</ul> 

CSS：

li { 
    min-height: 24px; /* Adjust height here */ 
}