问答

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

作者:admin 2021-05-08 我要评论

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

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)

导航条(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
  }
###

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

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • Angular 11+自定义指令中调用scroll无

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

  • vue 精度丢失如何处理啊

    vue 精度丢失如何处理啊

  • element-plus的select问题

    element-plus的select问题

  • webstorm git环境下  安装 node_module

    webstorm git环境下 安装 node_module

腾讯云代理商
海外云服务器