vue中监听滚动条事件，通过事件控制其他div滚动，固定表头和列

link之家

链接快照平台

输入网页链接，自动生成快照
标签化管理网页链接

相关文章推荐

气势凌人的核桃 · 新沂市第十八届金秋经贸洽谈会举行_澎湃号·政 ...· 1 年前 ·

安静的春卷 · 人工智能学术速递[9.8]-腾讯云开发者社区 ...· 2 年前 ·

文质彬彬的红金鱼 · 宁国市：积极优化基层政务服务，打通服务群众最 ...· 2 年前 ·

腼腆的蚂蚁 · 全能篮球漫画｜官方在线漫画全集-快看漫画· 2 年前 ·

欢乐的篮球 · 电影房子内比房间外多出几米 - 抖音· 2 年前 ·

1.首先要有一个div出现滚动条，比如我想做的内容如下图：

我的需求是（1）通过横向滚动div4，控制2的横向滚动，1和3固定不动（2）纵向滚动4，控制1和3的纵向滚动，2固定不动

布局方面不好讲，代码太多，此处省略，简单的描述来说就是2和4需要滚动的内容宽度要一样，既然需要滚动，那么里面的内容肯定是很长的。1，4, 3的内容高度一样。因为4不管横向滚动和纵向滚动，他的距离实际就是计算跟父元素最左边或者最顶部的距离，得到这个距离去设置其他div的left或者top.

2.事件监听

  destroyed () {
    window.removeEventListener('scroll', this.handleScroll, true)
  mounted() {
    window.addEventListener('scroll', this.handleScroll, true)
methods: {
  // 控制滚动条
  handleScroll (data) {
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop // 滚动条偏移量
    // 横向滚动
    let scrollLeft = (this.$refs.scrollX).scrollLeft // scrollX为图上div4
    let fixedHead = this.$refs.setScrollX // div2
    fixedHead.scrosllLeft = scrollLeft // 设置div2的scrosllLeft
    // 纵向滚动
    let scrollTop1 = (this.$refs.scrollX).scrollTop  // scrollX为图上div4
    let fixedLeft1  = this.$refs.setScrollY1 // div1
    let fixedLeft2  = this.$refs.setScrollY2 // div3
    fixedLeft1.scrollTop = scrollTop1 // 设置div1的scrollTop
    fixedLeft2.scrollTop = scrollTop1 // 设置div2的scrollTop