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

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

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

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

希望能帮助到你!

### Vue3 实现 H5 页面上拉加载功能 为了实现在 Vue3 中的 H5 页面上拉加载功能,通常会采用监听滚动事件的方式来检测页面是否已经到达底部。一旦确认用户已滚动到页面底部,则触发新的数据请求并更新视图。 #### HTML 结构 首先设置好基本的HTML结构来容纳可以上拉加载的数据列表: ```html <template> <div ref="containerRef" @scroll="handleScroll"> <!-- 数据项 --> <ul v-if="items.length > 0"> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> <!-- 加载指示符 --> <p v-show="loading">正在加载...</p> <!-- 完成提示 --> <p v-if="noMoreData && !loading">没有更多数据</p> </div> </template> ``` #### JavaScript 方法 接着编写相应的JavaScript方法用于处理滚动事件以及发起网络请求获取新一批次的数据条目: ```javascript <script setup lang="ts"> import { ref } from &#39;vue&#39;; // 假设这是通过API调用来填充初始项目的函数 const fetchItems = async (offset: number): Promise<void> => { try { const response = await axios.get(`/api/items?offset=${offset}`); return response.data.items; } catch(error){ console.error(&#39;Failed to load more data&#39;, error); } }; let containerRef = $ref(null); // DOM节点引用 let loading = $ref(false); // 是否处于加载状态 let noMoreData = $ref(false); // 是否还有更多数据 let offset = $ref(0); // 当前偏移量 let items = $ref([] as string[]); async function handleScroll() { if (!containerRef || loading || noMoreData) return; let scrollTop = containerRef.scrollTop; let clientHeight = containerRef.clientHeight; let scrollHeight = containerRef.scrollHeight; // 判断是否接近底部 if ((scrollTop + clientHeight >= scrollHeight - 10)) { loadMore(); } } function resetLoadStatus(){ loading=false; noMoreData=false; } async function loadMore():Promise<void>{ if(!loading&&!noMoreData){ loading=true; // 设置为true防止重复加载 setTimeout(async ()=>{ const newItems=await fetchItems(offset); if(newItems&&newItems.length===0){ noMoreData=true;// 如果返回为空则表示无更多数据 }else{ items=[...items,...newItems]; offset+=newItems.length; } loading=false; },1000)//模拟延迟时间以便观察效果 } } onMounted(() => { // 初始化时加载第一批数据 loadMore().then(resetLoadStatus); }); </script> ``` 此代码片段展示了如何利用 `@scroll` 事件监听器监控用户的滚动行为,并当接近页面底部时执行异步操作以追加额外的内容至现有列表中[^2]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值