Vue 某区域滚动至顶部 实现吸顶效果(固定定位) / 回到顶部

需求介绍

1、滚动吸顶        

要求蓝色框内模块滑动到头部，左侧列表固定，右侧内容块继续滚动

使用window方法 监听滚动事件：window.addEventListener()

参数1：事件类型（click、mousedown、scroll) 

参数2：事件触发后调用函数

参数3：冒泡或捕获（布尔类型）

    mounted() {
        window.addEventListener('scroll', this.handleScroll);
    },
    beforeDestroy() {
        // 最后记得移除事件
        window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
        handleScroll() {
            //函数处理
        },
    }

2、实现 回到顶部功能 也是可以用 window.addEventListener()

     <div v-if="isTops" id="toppings">
        <img src="@/assets/serviceDesk/topping.png" alt="回到顶部">
     </div>
    
    mounted() {
        window.addEventListener('scroll', this.handleScroll, true)
    },
    beforeDestroy() {
        window.removeEventListener('scroll', this.handleScroll, true)
    },
    methods: {
        handleScroll(e) {

                // isTops ：滚动到一定位置 展示回到顶部按钮
                // timer ：定时器实现滚动动画回到顶部

            if (e.target.scrollTop > 1200) {
                this.isTops = true
                document.getElementById('toppings').addEventListener('click', function () {
                    var timer = setInterval(function () {
                        e.target.scrollTop = Math.floor(e.target.scrollTop - 5);
                        if (e.target.scrollTop === 0) {
                            clearInterval(timer);
                        }
                    },);
                })
            } else {
                this.isTops = false
            }
        },
    },