ks-app-employment-service/hook/useScrollDirection.js

import {
    ref
} from 'vue'

export function useScrollDirection(options = {}) {
    const {
        threshold = 50, // 滚动偏移阈值，降低以更敏感
        throttleTime = 16, // 节流时间（毫秒），约60fps
        onChange = null, // 滚动方向变化的回调
        hideThreshold = 100, // 隐藏区域的滚动阈值
        enablePerformanceMode = true // 启用性能优化模式
    } = options

    const lastScrollTop = ref(0)
    const accumulatedScroll = ref(0)
    const isScrollingDown = ref(false)
    const shouldHideTop = ref(false) // 控制顶部区域隐藏
    const shouldStickyFilter = ref(false) // 控制筛选区域吸顶
    let lastInvoke = 0

    function handleScroll(e) {
        const now = Date.now()
        if (enablePerformanceMode && now - lastInvoke < throttleTime) return
        lastInvoke = now

        const scrollTop = e.detail.scrollTop
        const delta = scrollTop - lastScrollTop.value
        accumulatedScroll.value += delta

        // 控制顶部区域隐藏
        if (scrollTop > hideThreshold) {
            if (!shouldHideTop.value) {
                shouldHideTop.value = true
            }
        } else {
            if (shouldHideTop.value) {
                shouldHideTop.value = false
            }
        }

        // 控制筛选区域吸顶（当顶部区域隐藏时）
        if (scrollTop > hideThreshold + 50) { // 稍微延迟吸顶
            if (!shouldStickyFilter.value) {
                shouldStickyFilter.value = true
            }
        } else {
            if (shouldStickyFilter.value) {
                shouldStickyFilter.value = false
            }
        }

        // 滚动方向检测（仅在性能模式下使用阈值）
        if (!enablePerformanceMode || Math.abs(accumulatedScroll.value) > threshold) {
            if (accumulatedScroll.value > 0) {
                // 向下滚动
                if (!isScrollingDown.value) {
                    isScrollingDown.value = true
                    onChange?.(true) // 通知变更为向下
                }
            } else {
                // 向上滚动
                if (isScrollingDown.value) {
                    isScrollingDown.value = false
                    onChange?.(false) // 通知变更为向上
                }
            }
            if (enablePerformanceMode) {
                accumulatedScroll.value = 0
            }
        }

        lastScrollTop.value = scrollTop
    }

    return {
        isScrollingDown,
        shouldHideTop,
        shouldStickyFilter,
        handleScroll
    }
}