Angular 11+自定义指令中调用scroll无效

Question

导航条(Nav)在连接过多时，一部分会被隐藏掉，希望在激活指定的连接时，激活的连接会显示出来.通过调用:Nav.scroll(x,0)来进行横向移动。现在只有在FireFox中正常,Webkit内核的浏览器scoll无效

  constructor(private elementRef: ElementRef, private renderer2: Renderer2) { }
  ngOnInit(): void {
    console.log('screen width:'+window.innerWidth);
    //小屏幕导航时选中的元素在当前屏幕中可见
    if(window.innerWidth < 767){
      let nav:HTMLElement =this.elementRef.nativeElement.querySelector('#nav-tab')as HTMLElement;
      if(!nav){
        console.log('[appStickyScrollNavbar] not find element:#nav-tab');
      }
      let focEle:Element = nav.querySelector('a.active') as Element;
      if(!focEle){
        console.log('[appStickyScrollNavbar] not find active element:a.active');
      }

      let ofLeft:number = focEle.getBoundingClientRect().left;
      let eleWidth:number = focEle.getBoundingClientRect().width;
      console.log('[appStickyScrollNavbar]find active element client rect left:'+ofLeft);
      console.log('[appStickyScrollNavbar]find active element width:'+eleWidth);
      //FireFox
      nav.scrollTo((ofLeft-eleWidth), 0);
    }
  }

隐藏的样式如下:

  .tabbable .nav-tabs {
    overflow-x: auto;
    overflow-y:hidden;
    flex-wrap: nowrap;
  }
  .tabbable .nav-tabs .nav-link {
    white-space: nowrap;
    margin:0;
    padding:0 0.5rem
  }
  .tabbable .nav-tabs .nav-link.active{
    border-bottom-color:#007bff;
    background-color:#f6f6f6;
    color:#007bff
  }

Answer 1

换个生命周期函数呢，操作dom的操作，不知道在ngAfterViewInit中是否有效