2022-01-27 ·前端·Vue

vue-anchor 探索

背景

看到了公司的组件库里有el-achor但是又没有源代码，所以去网上学习了一下

实现1

直接设置容器的scrollTop

const anchor = this.$el.querySelector(selector)
document.body.scrollTop = anchor.offsetTop

const anchor = this.$el.querySelector(selector)
document.body.scrollTop = anchor.offsetTop

这让我想到了可以使用平滑滚动的样式：

.body {
  scroll-behavior: smooth;
}

.body {
  scroll-behavior: smooth;
}

实现2

Element.scrollIntoView() MDN

const anchor = this.$el.querySelector(selector)
anchor.scrollIntoView()

const anchor = this.$el.querySelector(selector)
anchor.scrollIntoView()

有了这个API，就可以直接让元素滚动到父元素的顶部，就是兼容没那么的好


返回