vue中的scrollTop获取

最新推荐文章于 2025-06-25 09:39:01 发布

weixin_43743956

最新推荐文章于 2025-06-25 09:39:01 发布

阅读量6.9k

点赞数

CC 4.0 BY-SA版权

分类专栏：日常积累文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_43743956/article/details/85038004

日常积累专栏收录该内容

14 篇文章

订阅专栏

本文介绍如何通过监听scroll事件实现页面滚动时头部背景的渐变效果，提供了兼容不同设备和浏览器的代码示例，并讨论了与doctype声明相关的DOM元素选择问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在项目中，有一个需求是，下拉一段距离后，头部的背景有相应渐变。
那就来监听scroll事件就好了。

mounted(){
    let _this=this
    window.addEventListener('scroll',function(){
      let top = document.documentElement.scrollTop || document.body.scrollTop || window.pageYOffset//要做兼容 在模拟器能正常获取scrolltop在微信h5页面和手机的浏览器页面一直为0
        if(top==0 || top<0){
           _this.scrollTag=false;
        }else{
           _this.scrollTag=true
        }

      })
  }

还有一些网上说法是，与你的doctype声明有关就是当

页面指定了DTD，使用document.documentElement。
页面没有DTD，使用document.body
尝试无果，还是用上述的兼容写法有效