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
相关推荐
DaMu4 分钟前
Cesium & Three.js 【移动端手游“户外大逃杀”】 还在“画页面的”前端开发小伙伴们,是时候该“在往前走一走”了!我们必须摆脱“画页面的”标签!
前端·gis
非专业程序员4 分钟前
一文读懂Font文件
前端
Asort6 分钟前
JavaScript 从零开始(七):函数编程入门——从定义到可重用代码的完整指南
前端·javascript
Johnny_FEer7 分钟前
什么是 React 中的远程组件?
前端·react.js
真夜7 分钟前
关于rngh手势与Slider组件手势与事件冲突解决问题记录
android·javascript·app
我是日安10 分钟前
从零到一打造 Vue3 响应式系统 Day 10 - 为何 Effect 会被指数级触发?
前端·vue.js
知了一笑10 分钟前
「AI」网站模版,效果如何?
前端·后端·产品
艾小码13 分钟前
用了这么久React,你真的搞懂useEffect了吗?
前端·javascript·react.js
知觉14 分钟前
实现@imput支持用户输入最多三位整数,最多一位小数的数值
前端
RoyLin14 分钟前
TypeScript设计模式:状态模式
前端·后端·typescript