vue3如何监听页面的滚动

 更新时间:2023年07月03日 10:20:56   作者:至尊绝伦  
这篇文章主要给大家介绍了关于vue3如何监听页面的滚动的相关资料,在vue中实现滚动监听和原生js无太大差异,文中通过图文介绍的非常详细,需要的朋友可以参考下

有的时候监听的是window的滚动,有的时候是监听元素的滚动。 

我们可以先创建一个hook。useScroll.js

import { onMounted,onUnmounted, ref } from 'vue'
import { throttle } from 'underscore'
export default function useScroll(elRef){
  let el = window
  const isReachBottom = ref(false)
  const clientHeight = ref(0)
  const scrollTop = ref(0)
  const scrollHeight = ref(0)
  const scrollListenerHandler = throttle(() => {
    if(el === window){
      clientHeight.value =  document.documentElement.clientHeight
      scrollHeight.value = document.documentElement.scrollHeight
      scrollTop.value = document.documentElement.scrollTop
    }else {
      clientHeight.value = el.clientHeight
      scrollTop.value = el.scrollTop
      scrollHeight.value = el.scrollHeight
    }
    if(clientHeight.value + scrollTop.value >= scrollHeight.value){
      // homeStore.fetchHouselistData()
      isReachBottom.value = true
    }
  }, 100)
  onMounted(()=> {
    if(elRef) {
      el = elRef.value
    }
    el.addEventListener("scroll", scrollListenerHandler)
  })
  onUnmounted(()=>{
    el.removeEventListener("scroll", scrollListenerHandler)
  })
  return { isReachBottom, clientHeight, scrollTop, scrollHeight }
}

 可以传入元素实例参数elRef,如果没有传入的话就初始化为window。

在挂载完成之后判断是否传入了元素实例elRef,如果有的话就使用元素实例,监听元素的滚动。

还需修改window还是元素滚动的判定。 

下面是使用这个hook的方法。 

使用ref取到需要滚动的元素实例。将取到的元素实例传入到useScroll中。

使用useScroll这个hook,取出scrollTop的值进行判断。

总结

到此这篇关于vue3如何监听页面的滚动的文章就介绍到这了,更多相关vue3监听页面滚动内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Django+Vue实现WebSocket连接的示例代码

    Django+Vue实现WebSocket连接的示例代码

    这篇文章主要介绍了Django+Vue实现WebSocket连接的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • vue拦截器实现统一token,并兼容IE9验证功能

    vue拦截器实现统一token,并兼容IE9验证功能

    这篇文章主要介绍了vue拦截器实现统一token,并兼容IE9验证功能,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2018-04-04
  • vscode不支持nvue语法高亮的解决办法(图文详解)

    vscode不支持nvue语法高亮的解决办法(图文详解)

    这篇文章主要介绍了vscode不支持nvue语法高亮的解决办法,用vscode开发uniapp会遇到用.nvue开发的时候。但是vscode并没有提供.nvue的语法高亮,这篇文章给刚用vscode写.nvue的读者,需要的朋友可以参考下
    2023-02-02
  • vue axios数据请求get、post方法及实例详解

    vue axios数据请求get、post方法及实例详解

    axios是一个基于Promise,同时支持浏览器端和Node.js的HTTP库,常用于Ajax请求。这篇文章主要介绍了vue axios数据请求get、post方法的使用 ,需要的朋友可以参考下
    2018-09-09
  • 解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题

    解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题

    这篇文章主要介绍了解决Mint-ui 框架Popup和Datetime Picker组件滚动穿透的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • Vue之监听数据的原理详解

    Vue之监听数据的原理详解

    这篇文章主要为大家介绍了Vue之监听数据的原理,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助<BR>
    2021-11-11
  • vue 实现移动端键盘搜索事件监听

    vue 实现移动端键盘搜索事件监听

    今天小编就为大家分享一篇vue 实现移动端键盘搜索事件监听,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • 在vue中使用jointjs的方法

    在vue中使用jointjs的方法

    本篇文章主要介绍了在vue中使用jointjs的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-03-03
  • 详解vue几种主动刷新的方法总结

    详解vue几种主动刷新的方法总结

    这篇文章主要介绍了详解vue几种主动刷新的方法总结,文中详细的介绍了几种方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02
  • vue3 elementPlus部分组件样式修改的方法

    vue3 elementPlus部分组件样式修改的方法

    这篇文章主要介绍了vue3 elementPlus部分组件样式修改的方法,本文给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
    2024-01-01

最新评论