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

最新推荐文章于 2024-11-13 21:37:31 发布

原创最新推荐文章于 2024-11-13 21:37:31 发布 · 2.5k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

文章讨论了在Vue应用中，父组件设置overflow属性可能对子组件滚动事件造成的影响。当父组件使用overflow隐藏导致滚动无效，而在子组件的onMounted生命周期钩子中监听并处理滚动事件时恢复正常。解决方案可能涉及重新组织布局或调整滚动事件监听策略。

父子组件嵌套, 检查父组件中是否进行了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,
    );
  });

希望能帮助到你！