vue之获取滚动条位置

时间:2024-03-06 14:08:28

前言

记录一下获取滚动条相对距离和绝对距离的方法

说明(个人理解)

  • 相对距离
    当前滚动条到父滚动条的距离
  • 绝对距离
    当前滚动条到页面顶部的位置

实例

1.获取当前组件DOM标签滚动条位置

// 为保证DOM节点加载完毕,要在 mounted 中实现
// 使用 $refs 获取DOM实例,以 tree 为例
mounted() {
    this.$refs.tree.addEventListener(\'scroll\', e => {
        console.log(\'父滚动条到页面顶部距离\', e.target.offsetTop)
        console.log(\'相对距离\', this.$refs.tree.scrollTop)
        console.log(\'绝对距离\', e.target.offsetTop + this.$refs.tree.scrollTop)
    }, false)
}

2.获取子组件DOM标签滚动条位置

mounted() {
    this.$refs.tree.$el.addEventListener(\'scroll\', e => {
        console.log(\'父滚动条到页面顶部距离\', e.target.offsetTop)
        console.log(\'相对距离\', this.$refs.tree.$el.scrollTop)
        console.log(\'绝对距离\', e.target.offsetTop + this.$refs.tree.$el.scrollTop)
    }, false)
},

总结

  • 当使用 $refs 获取DOM实例时,如果加在当前组件DOM节点上,则获取的是DOM实例。如果加在子组件上,则获取的是子组件实例,可以再使用 $el 获取到组件实例对应的DOM实例