我使用 Vue 实现了原神官网的全屏滚动效果

先看一下官网效果：https://ys.mihoyo.com/main/map

概念

每次当滚动鼠标滚轮的时候，页面会进行一整页的滚动，这就是全屏滚动。

要求

当窗口大小变化时，全屏滚动效果不会发生变化，即需要做到自适应，不受到高度宽度的影响。

当点击指示器也可以进行页面切换。

原理

 

最外层容器：就是我们的窗口，视角能看到的。

内层容器：用来存放我们需要滚动内容的容器。

滚动元素：就是我们看到的一张张照片。

首先对最外侧容器的overflow：hidden；这样保证不会溢出。

其次对内层容器进行滚动，每次滚动的高度就是窗口的高度，但是需要动态计算窗口的高度。

最后只需要判断上一页还是下一页来计算$index，通过$index✖页面高度，来进行滚动即可。

代码实现

HTML代码

大家可以结合html结构，去理解 js 代码

<template>
  <!-- 最外层容器 -->
  <div class="outer-box" ref="fullPage">
    <!-- 内层容器 -->
    <div ref="element" :class="{ activeTranstion: isTranstion }" class="inner-box" @mousewheel="mousewheel">
      <!-- 滚动显示的元素 -->
      <div
        v-for="item in ysImage"
        :style="{ backgroundImage: `url(${item.backgroundImage})` }"
        class="scroll-element"
      ></div>
    </div>
    <!-- 指示器 -->
    <ul class="aside">
      <li v-for="(item, index) in asideData" @click="changeBac(index)">
        <span :class="{ active: index === $index }"></span>
        <div class="show-dec">{
  { item.title }}</div>
      </li>
    </ul>
  </div>
</template>
​

JS代码

给内层容器添加鼠标滚动事件