He desarrollado una tabla ya la que he integrado una navegación de creación propia. El problema es que cuando me desplazo hacia arriba y hacia abajo, siempre muevo la barra de desplazamiento. ¿Hay alguna manera cuando presiono tecla abajo o tecla arriba que la barra de desplazamiento no se mueva? Sé que es factible hostListener. Pero no he descubierto cómo implementarlo. ¿Puedes ayudarme por favor?

Mi código:

// DIRECTIVA

 constructor(private keyboardService: KeyboardService, public element: ElementRef, private render: Renderer2) { this.render.setAttribute(this.element.nativeElement, 'tabindex', '0'); } @HostListener('keydown', ['$event']) onKeyUp(e) { switch (e.keyCode) { case 38: this.keyboardService.sendMessage({ element: this.element, action: 'UP' }); break; case 37: this.keyboardService.sendMessage({ element: this.element, action: 'LEFT' }); break; case 40: this.keyboardService.sendMessage({ element: this.element, action: 'DOWN' }); break; case 39: this.keyboardService.sendMessage({ element: this.element, action: 'RIGTH' }); break; } }

// Componente

 /** * Use arrowKeys * @param object any */ move(object) { const inputToArray = this.inputs.toArray(); let index = inputToArray.findIndex((x) => x.element === object.element); switch (object.action) { case 'UP': index -= this.columns.length; break; case 'DOWN': index += this.columns.length; break; case 'LEFT': index--; break; case 'RIGTH': index++; break; } if (index >= 0 && index < this.inputs.length) { inputToArray[index].element.nativeElement.focus(); } }

Mi StackBlitz: https://stackblitz.com/edit/stackoverflow-72056135-buytsq?file=app%2Ftable-basic-example.html