scrollIntoView()方法的学习

  • Post author:
  • Post category:其他


scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。

Element 方法 scrollIntoView:滚动父级容器,使得元素出现在视口。即聚焦滚动到目标元素上

可直接查看MDN文档:

MDN中的介绍

具体使用:

//获取操作的元素,在此名为tab
const tab = doctment.querySelector('.activeTab')
tab.scrollIntoView(); // 等同于tab.scrollIntoView(true)
tab.scrollIntoView(alignToTop); //布尔参数
tab.scrollIntoView(scrollIntoViewOptions); //对象参数

参数:

scrollIntoViewOptions,一个包含下列属性的对象。

  • behavior定义过渡动画,默认值为auto。

    auto,表示没有平滑的滚动动画效果。

    smooth,表示有平滑的滚动动画效果。

  • block定义垂直方向的对齐,默认值为start。

    start,表示顶端对齐。

    center,表示中间对齐。

    end,表示底端对齐。

    nearest:如果元素完全在视口内,则垂直方向不发生滚动。

    如果元素未能完全在视口内,则根据最短滚动距离原则,垂直方向滚动父级容器,使元素完全在视口内。

  • inline定义水平方向的对齐,默认值为nearest。

    start,表示左端对齐。

    center,表示中间对齐。

    end,表示右端对齐。

    nearest:如果元素完全在视口内,则水平方向不发生滚动。

    如果元素未能完全在视口内,则根据最短滚动距离原则,水平方向滚动父级容器,使元素完全在视口内。

alignToTop:

当传入参数true时,相当于{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}

当传入参数false时,相当于{behavior: ‘auto’, block: ‘end’, inline: ‘nearest’}

当未传入参数时,默认值为:{behavior: ‘auto’, block: ‘start’, inline: ‘nearest’}

在vue代码直接使用:

// 滚动到指定位置的tab ,会有平稳滚动的效果,奈斯
    this.$nextTick(() => {
      const selectedTab = document.querySelector('.tab')
      selectedTab.scrollIntoView({ behavior: 'smooth', inline: 'center', block: 'center' })
    })



版权声明:本文为zoepriselife316原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。