Vue获取滑动距离的一个方法

Love The Way You Lie 2023-01-19 09:51 5阅读 0赞

###### 今天做博客，要做title栏滑动变色，在网上查找了好多，都是瞎编这个方法： ######

let scrollTop =
            document.documentElement.scrollTop || //firefox
            document.body.scrollTop || //chrome
            window.pageYOffset //safari

###### 打印出来的结果都是0，原因我还没有找到，但是需求还是要实现的 ######

然后开始找问题，发现body的高度始终都没有变过  
![在这里插入图片描述][20210509220616154.png]  
既然是滑动，那么一定有高度变化的元素存在，最后定位到ul所在页面的div  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70]  
高度根据内容刷新会变化  
![在这里插入图片描述][20210509220740832.png]  
那么说明滚动发生在这个div上边，获取此div距离顶部高度，就可以实时监听滚动的发生  
贴代码：`忽略我对vue的不熟悉，写的不规范`

<el-main style="margin:0 auto;padding:0;min-height: 100vh; width: 100%;">
          <div ref="scorll_top">
            <First v-if="index_page == items[0].id" :text="items[0].id" />
            <Java v-else-if="index_page == items[1].id" :text="items[1].id" />
            <Vue v-else-if="index_page == items[2].id" :text="items[2].id" />
          </div>
    
        </el-main>

`注意绑定的时候true是必须写的，否则不会执行方法`

// 自动触发
      mounted: function () { 
        window.addEventListener('scroll', this.handleScroll, true)
      },

// 页面销毁前
      beforeDestroy: function () { 
        window.removeEventListener('scroll', this.handleScroll)
      },

methods: { 
        handleScroll() { 
          console.log(
            '距离顶部高度',
            this.$refs.scorll_top.getBoundingClientRect().top
          )
        },
      },

打印结果：`滚动高度是老方法，一直是0，代码里没有体现`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70 1]

[20210509220616154.png]: /images/20221021/705db59ff6b745d79e54f59a3ab5564a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70]: /images/20221021/1cda7a5babdc4a27b3c37e55e3180178.png
[20210509220740832.png]: /images/20221021/64b55bbc910f4c6d9d19350efa5cb68d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3lhbmdzaHVhaW9ubGluZQ_size_16_color_FFFFFF_t_70 1]: /images/20221021/0fff3dbe1efb4c60abace6372f6a2658.png