zoukankan      html  css  js  c++  java
  • vue之获取滚动条位置

    前言

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

    说明(个人理解)

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

    实例

    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实例
  • 相关阅读:
    腾讯云挂载文件服务器节点
    OpsManage 安装
    centos7 安装mysql
    vs code 新建vue项目
    Centos7 安装supervisor
    腾讯云Centos7 安装nginx
    django 生成pdf
    VM安装虚拟机
    ACM/ICPC 之 Floyd练习六道(ZOJ2027-POJ2253-POJ2472-POJ1125-POJ1603-POJ2607)
    ACM/ICPC 之 Floyd范例两道(POJ2570-POJ2263)
  • 原文地址:https://www.cnblogs.com/xpengp/p/13207140.html
Copyright © 2011-2022 走看看