scrollTop获取一直为0的解决方法(vue3开发h5)

最新推荐文章于 2024-06-05 17:56:57 发布

wanghao31

最新推荐文章于 2024-06-05 17:56:57 发布

阅读量2.2k

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/wanghao31/article/details/129221357

版权

父子组件嵌套, 检查父组件中是否进行了overflow的设置，overflow会导致这样的问题，以下代码是我在父组件定义的

  .main-page {
    box-sizing: border-box;
    height: calc(100vh - 92px);
    // overflow-y: hidden; //我就是加上了这个获取不到 将overflow代码去掉
    // overflow-x: hidden;
  }

2. 在子组件中onmounted尝试获取就正常啦

onMounted(() => {
    window.addEventListener(
      'scroll',
      () => {
        //获取视口高度
        const windowHeight = window.screen.height;
        //获取页面滚动距离
        const scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
        console.log(scrollTop);
      },
      true,
    );
  });

希望能帮助到你！