нужно сделать плавную прокрутку, когда скролишь, при этом чтобы работало на всех браузерах одинаково.
есть такой код
onMounted(() => {
const banner: Element | null = document.querySelector('#banner')
const _top: Element | null = document.querySelector('#_top')
const _bottom: Element | null = document.querySelector('#_bottom')
const sizeH = (banner as Element).getBoundingClientRect().height
document.addEventListener(
'wheel',
function (e: WheelEvent) {
positionScroll = e.deltaY
oY.value = (banner as Element).getBoundingClientRect().top
if (
(positionScroll >= 1 && -oY.value <= sizeH) ||
(positionScroll >= 100 && -oY.value <= sizeH)
)
if (!(_bottom as any).click()) (_bottom as any).click()
if (
(positionScroll <= -1 && -oY.value <= sizeH) ||
(positionScroll <= -100 && -oY.value <= sizeH)
)
if (!(_top as any).click()) (_top as any).click()
},
{ passive: false }
)
document.addEventListener('click', function (e: any) {
if (e.target.classList.contains('_bottom') && isScroll.value) {
scrolling(sizeH)
}
if (e.target.classList.contains('_top') && isScroll.value) {
scrolling(0)
}
})
})
function scrolling(size: number = 0) {
isScroll.value = false
window.scrollTo({ top: size, left: 0, behavior: 'smooth' })
setTimeout(() => {
isScroll.value = true
}, 500)
}
но суть в том что behavior: "smooth" работает в разных браузерах по разному
