scrollIntoView()方法的学习

scrollIntoView()方法将调用它的元素滚动到浏览器窗口的可见区域。
Element 方法 scrollIntoView：滚动父级容器，使得元素出现在视口。即聚焦滚动到目标元素上
可直接查看MDN文档：MDN中的介绍

具体使用：

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

参数：
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' })
    })
1
2
3
4
5