键盘事件不会滚动我已代码下拉

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 */ 
}