scroll事件初步实现个人主页下拉回弹功能

#创作灵感

        这是我写移动版抖音时遇到的难题：如何实现个人主页的下拉回弹动画？起初以为是顺手的事，没想到大有讲究，下拉时背景区域会跟随并放大背景图片， 松手时回弹到初始状态，大幅上滑时会在尽头触发动画。

基本逻辑

        下拉时多出的部分从哪来？让他一开始便存在：下拉部分的高度为最大下拉高度，通过滚动事件的相关函数相关来控制下拉区域的显示。一开始便滚动到一个初始位置，后续进行也通过滚动执行回弹函数。

        回弹函数的判断有两个时机：滚动结束和触摸抬起，对应短接触和长接触。判断当前视窗的scrollY，如果超过默认值就执行回弹函数

<template>
    <div class="top"  >
        <span v-for="i in 100" :key="i">我是背景</span>
    </div>
    <div class="bottom" >
        <span v-for="i in 100" :key="i">我是我是视频</span>
    </div>  
</template>

<script setup>
import {  ref, onMounted } from 'vue';
const isScroll = ref(0)
const isDown = ref(false)
const scrolling = ref(false)
const topScroll = () =>{
    if (scrolling.value) return
    isScroll.value ++
    const temp = isScroll.value
    setTimeout(()=>{
        if (temp === isScroll.value){
            // 标志滑动结束 判断时机1
            isScroll.value = 0
            if (!isDown.value && window.scrollY <= 200){
                console.log('从scroll触发的');
                window.removeEventListener('scroll', topScroll)
                miscroll()
            }
        }
    }, 10)
}
const touchst = () =>{
    isDown.value = true
}

const touched = () => {
    isDown.value = false
    if (!isScroll.value && window.scrollY <= 200){
        // 判断时机2
        console.log('从touched触发的');
        window.removeEventListener('scroll', topScroll)
        miscroll()
    }
}

const miscroll = () =>{
    // 回弹函数
    scrolling.value = true
    console.log('触发了');
    window.scrollTo({
        top: 200,
        behavior: 'smooth'
    })
    setTimeout(() => {
        scrolling.value = false
        window.addEventListener('scroll', topScroll); // miscroll执行完毕，重置标志变量
    }, 500)
}

onMounted(() => {
    window.addEventListener('scroll', topScroll)
    window.addEventListener('touchstart', touchst)
    window.addEventListener('touchend', touched)
    miscroll()
})
</script>

<style scoped>
.top{
    width: 100%;
    height:500rem;
    background-color: black;
    font-size: 15rem;
    color: white;
}
.bottom{
    width: 100%;
    height:1300rem;
    background-color: pink;
    font-size: 15rem;
    color: black;
}
</style>

        也可以用scrollend来替换两种逻辑判断，但似乎不太兼容，便没有使用