前言
记录一下获取滚动条相对距离和绝对距离的方法
说明(个人理解)
相对距离
当前滚动条到父滚动条的距离
绝对距离
当前滚动条到页面顶部的位置
实例
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实例
