html - 键盘事件不滚动下拉的滚动条

Question

我编写了如下代码

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

 eventHandler(event) {
}

以上是代码中处理键盘事件的函数。

我已经给出了键盘事件来选择元素。它工作正常。早些时候我在下拉列表中没有滚动条。现在我有了滚动条，当我滚动超出可见范围时，滚动条不会移动。无论如何，是否可以使用键盘事件启用滚动？

Answer 1

我创建了这个 working demo从 md-autocomplete 滚动列表中获取代码引用。

就像我们手动处理上下键高亮选项一样，滚动也需要手动处理。请根据您的要求调整li、dropdown 面板、OPTION_HEIGHT 和PANEL_HEIGHT 的高度。

在这里，我只添加了使滚动条正常工作所需的新代码。 plunker 中的所有新行都清楚地标有注释。

组件.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 */
}