Question

在Angular 6项目中，我有一个材质对话框弹出窗口。此对话框显示城市名称列表。该列表具有滚动条，并且工作正常。

现在，我需要使列表响应上下箭头，并通过按键使突出显示的行移动，而我是通过主机侦听器完成的。

@HostListener('window:keyup', ['$event'])
keyEvent(event: KeyboardEvent) {
  console.log(event);

  if (event.keyCode === 40) {
    this.selectedIndex++;
  }

  if (event.keyCode === 38) {
    this.selectedIndex--;
  }
}

我遇到的问题是每次单击也会移动滚动条，但是它们不同步。单击几下后，突出显示的行将移过可见的滚动区域。

如何将突出显示的行保持在滚动区域的可见查看区域内？

有没有一种方法可以控制滚动移动到与我行的行高相匹配的距离？

谢谢

Answer 1

我仅出于说明目的为selectedIndex创建了一个变量。

import { Component, HostListener } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})


export class AppComponent  {
  name = 'Angular';
  selectedIndex:number =0;



@HostListener('window:keyup', ['$event'])
keyEvent(event: KeyboardEvent) {
  console.log(event);

  if (event.keyCode === 40) {
    this.selectedIndex++;
    window.scrollBy(0,window.scrollY+40)
    console.log(window.scrollY, this.selectedIndex)
  }

  if (event.keyCode === 38) {
    this.selectedIndex--;
    window.scrollBy(0,window.scrollY-40)
  }
}

}

如何控制div的滚动？

1 个答案: