长图滚动加载动画，一进入首页自动加载首页内容

1、背景

一打开url地址进入首页的时候，自动滚动页面内容，点击正在滚动的页面任意位置，停止自动滚动。

2、技术路径

3、具体操作

页面元素

index.vue 复制代码

<template>
  <div>
    <transition name="fade" @after-leave="onLoadingComplete" >
      <div id="loading"  v-if="isLoading">
        <img src="../../assets/images/Galaxy/logo.png" alt="" class="loading-logo" />
        <div class="progress-box">
          <div class="progress"></div>
        </div>
      </div>
    </transition>
    <div v-show="!isLoading">
      <div class="zeroBgs">
        <img src="../../assets/images/logo.gif" class="img-logo wow fadeIn" data-wow-delay="1.3s">
        ...
      </div>
      <div class="oneBgs">
      ....
      </div>
     </div>
 </template>

初始化动画，并且在页面after-leave完成后，触发自动滚动函数startAutoScroll，通过requestAnimationFrame实现了平滑的自动滚动效果，并且在页面不可见或者手动干预的情况下停止自动滚动。

index.js 复制代码

export default {
  name: "Index",
  data() {
    return {
      isLoading: true
    };
  },
  created() {
  },
  mounted() {
    setTimeout(() => {
      this.isLoading = false;
      this.$wow.init()
    }, 3000);
  },
  methods: {
    //初始化动画离开后立马加载自动滚动
    onLoadingComplete() {
      this.startAutoScroll();
    },
    //自动滚动
    startAutoScroll() {
      const height = window.innerHeight;
      const clientHeight = document.querySelector('.zeroBgs').clientHeight;
      const scrollSpeed = 35; // 像素/秒
      let startTime = null;
      let isScrolling = true;
      let rafId = null;

      // 页面不可见时暂停滚动
      document.addEventListener('visibilitychange', () => {
        if (document.hidden) {
          cancelAnimationFrame(rafId);
          isScrolling = false;
        }
      });

      // 页面发生手动滑动事件时暂停滚动
      document.addEventListener('touchstart', () => {
        cancelAnimationFrame(rafId);
        isScrolling = false;
      });

      function scroll(timestamp) {
        if (!startTime) startTime = timestamp;//如果startTime为null，则将其初始化为当前的时间戳
        if (!isScrolling) return;//如果isScrolling为false，则直接返回，停止滚动

        const currentScroll = document.documentElement.scrollTop || document.body.scrollTop;
        const elapsed = (timestamp - startTime) / 1000; // 转换为秒

        if (currentScroll >= clientHeight - height) {
          isScrolling = false;
          return;
        }

        const scrollPosition = Math.min(elapsed * scrollSpeed, clientHeight - height);

        window.scrollTo({
          top: scrollPosition,
          behavior: 'auto'
        });

        rafId = requestAnimationFrame(scroll);//启动动画或者重绘任务
        //使用requestAnimationFrame递归调用scroll函数，实现连续的滚动动画
      }

      rafId = requestAnimationFrame(scroll);

      // 返回停止函数以便外部调用
      //返回一个匿名函数，该函数可以将isScrolling设置为false，并调用cancelAnimationFrame(rafId)取消动画帧，从而停止滚动。这样，外部代码可以调用这个返回的函数来停止自动滚动
      return () => {
        isScrolling = false;
        cancelAnimationFrame(rafId);//取消动画或者重绘任务
      };
    }
  }
}