vue判断滚动条上下拉及是否在顶部

方式1. 使用useScroll方式

bash 复制代码
import { useScroll } from '@vueuse/core'
setup() {
    const showNaviBar = ref(true)
    const { arrivedState } = useScroll(document.querySelector('.body'), {
      onScroll: (e) => {
        console.log(arrivedState.top, arrivedState.bottom)
        if (arrivedState.top) {// 在顶部
          showNaviBar.value = true
          return
        }
        if (arrivedState.bottom) {// 到底
          showNaviBar.value = false
        } else {
          showNaviBar.value = true// 其它情况..
        }
      },
    })
    return {
    	showNaviBar,
	}
 }

方式2. 直接监听dom的scroll事件

bash 复制代码
import { ref, onBeforeUnmount, onMounted } from '@vue/composition-api'
setup() {
    const showNaviBar = ref(true)
    const scrollNum = ref(0)
    const handleScroll = (e) => {
      const scrollElement = e.target
      const scrollTop = scrollElement.scrollTop
      const scroll = scrollTop - scrollNum.value
      scrollNum.value = scrollTop
      console.log(scrollTop, scroll)
      if (scrollTop === 0) {// 在顶部,不滚动的情况
        showNaviBar.value = false
        return
      }
      if (scroll >= 0) { // 在滚动时,向下
        showNaviBar.value = false
      } else {// 在滚动时,向上
        showNaviBar.value = true
      }
    }
    onMounted(() => {  
      const scrollElement = document.querySelector('.body')
      scrollElement.addEventListener('scroll', handleScroll)
    })
    onBeforeUnmount(() => {  
      const scrollElement = document.querySelector('.body')
      scrollElement.removeEventListener('scroll', handleScroll)
      showNaviBar.value = true
    })
    return {
    	showNaviBar,
	}
 }
bash 复制代码
handleScroll 打印日志: down
2582 23
2601 19
2614 13
2623 2
handleScroll 打印日志: up
2787 -13
2773 -14
2728 -8
2724 -4
相关推荐
南方者7 分钟前
文心文心,其利锻心!这个古风射覆,它帅到我了!文心快码 3.5S
前端·敏捷开发·文心快码
永日456708 分钟前
学习日记-CSS-day53-9.11
前端·css·学习
云枫晖8 分钟前
JS核心知识-this的指向
前端·javascript
magnet11 分钟前
用img标签渲染的svg VS 直接使用svg标签,有什么区别?
前端·html
ze_juejin13 分钟前
createComponent的environmentInjector详解
前端
云舟吖13 分钟前
基于 electron-vite 从零到一搭建桌面端应用
前端·架构
ze_juejin14 分钟前
CSS backdrop-filter 属性详解
前端
前端人类学15 分钟前
现代贪吃蛇游戏的进化:从经典玩法到多人在线体验
javascript·css
不爱编程的小方16 分钟前
响应式布局
前端·css3