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
相关推荐
jakeswang18 分钟前
查询条件与查询数据的ajax拼装
前端·ajax
samuel91819 分钟前
axios取消重复请求
前端·javascript·vue.js
三天不学习21 分钟前
JiebaAnalyzer 分词模式详解【搜索引擎系列教程】
前端·搜索引擎·jiebaanalyzer
苹果酱056725 分钟前
Golang标准库——runtime
java·vue.js·spring boot·mysql·课程设计
滿29 分钟前
Vue 3 中按照某个字段将数组分成多个数组
前端·javascript·vue.js
安分小尧40 分钟前
[特殊字符] 使用 Handsontable 构建一个支持 Excel 公式计算的动态表格
前端·javascript·react.js·typescript·excel
好_快1 小时前
Lodash源码阅读-baseClone
前端·javascript·源码阅读
Double Point1 小时前
(三十一) Dart 中的网络请求教程:从知乎日报 API 获取数据
前端
excel1 小时前
webpack 核心编译器 十二 节
前端
好_快1 小时前
Lodash源码阅读-baseToString
前端·javascript·源码阅读