59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import { useWindowScroll } from '@vueuse/core'
|
|
|
|
export const useScrollStore = defineStore('scrollStore', () => {
|
|
const { y: windowY } = useWindowScroll({ behavior: 'smooth' })
|
|
const breakpoints = useResponsiveBreakpoints()
|
|
|
|
const headerHeight = computed(() => {
|
|
return breakpoints.value.isMobile ? 48 : 64
|
|
})
|
|
const stoveGnbHeight = 48 as number
|
|
const isPassedStoveGnb = ref(false)
|
|
const scrollGnbPosition = ref(stoveGnbHeight)
|
|
|
|
const updateScrollValue = () => {
|
|
if (stoveGnbHeight <= windowY.value) {
|
|
isPassedStoveGnb.value = true
|
|
scrollGnbPosition.value = 0
|
|
} else {
|
|
isPassedStoveGnb.value = false
|
|
if (windowY.value === 0) {
|
|
scrollGnbPosition.value = stoveGnbHeight
|
|
} else {
|
|
scrollGnbPosition.value = stoveGnbHeight - windowY.value
|
|
}
|
|
}
|
|
}
|
|
|
|
const controlScrollLock = (state: boolean) => {
|
|
if (!import.meta.client) return
|
|
|
|
if (state) {
|
|
document.body.classList.add('scroll-lock')
|
|
} else {
|
|
document.body.classList.remove('scroll-lock')
|
|
}
|
|
}
|
|
|
|
const scrollToAnchor = (targetId: string) => {
|
|
const targetElement = document.getElementById(targetId)
|
|
if (!targetElement) return
|
|
|
|
const elementTop = targetElement.getBoundingClientRect().top
|
|
const currentScrollY = window.scrollY
|
|
const targetScrollY = currentScrollY + elementTop - headerHeight.value
|
|
|
|
windowY.value = targetScrollY
|
|
}
|
|
|
|
return {
|
|
stoveGnbHeight,
|
|
isPassedStoveGnb,
|
|
scrollGnbPosition,
|
|
|
|
updateScrollValue,
|
|
controlScrollLock,
|
|
scrollToAnchor,
|
|
}
|
|
})
|