前端全屏滚动学习总结

最新推荐文章于 2024-05-22 13:52:22 发布

Iswayzw

最新推荐文章于 2024-05-22 13:52:22 发布

阅读量1.2k

点赞数 2

分类专栏：前端文章标签：前端 vue

本文链接：https://blog.csdn.net/qq_42496984/article/details/127928356

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

全屏滚动-学习总结

全屏滚动是指一次鼠标滚动切换整个屏幕的内容，多用于产品展示、年终总结等页面，能够在网页上呈现出PPT般的效果，简洁且美观。

在线演示1-商品介绍，在线演示2-年终总结

实现代码

全屏滚动的功能看起来简单，实现起来却有不少细节。咱们先看手写代码，再看封装好的插件调用。

代码实现

如下vue代码参考自博客1，代码效果不错，原作者也给出了详细的注释。

<template>
  <div class="fullPage" ref="fullPage">
    <div
      class="fullPageContainer"
      ref="fullPageContainer"
      @mousewheel="mouseWheelHandle"
      @DOMMouseScroll="mouseWheelHandle"
    >
      <div class="section section1">1</div>
      <div class="section section2">2</div>
      <div class="section section3">3</div>
      <div class="section section4">4</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      fullpage: {
        current: 1, // 当前的页面编号
        isScrolling: false, // 是否在滚动,是为了防止滚动多页，需要通过一个变量来控制是否滚动
        deltaY: 0, // 返回鼠标滚轮的垂直滚动量，保存的鼠标滚动事件的deleteY,用来判断是往下还是往上滚
      },
    };
  },
  methods: {
    next() {
      // 往下切换
      let len = 4; // 页面的个数
      if (this.fullpage.current + 1 <= len) {
        // 如果当前页面编号+1 小于总个数，则可以执行向下滑动
        this.fullpage.current += 1; // 页面+1
        this.move(this.fullpage.current); // 执行切换
      }
    },
    pre() {
      // 往上切换
      if (this.fullpage.current - 1 > 0) {
        // 如果当前页面编号-1 大于0，则可以执行向下滑动
        this.fullpage.current -= 1; // 页面+1
        this.move(this.fullpage.current); // 执行切换
      }
    },
    move(index) {
      this.fullpage.isScrolling = true; // 为了防止滚动多页，需要通过一个变量来控制是否滚动
      this.directToMove(index); //执行滚动
      setTimeout(() => {
        //这里的动画是1s执行完，使用setTimeout延迟1s后解锁
        this.fullpage.isScrolling = false;
      }, 1010);
    },
    directToMove(index) {
      let height = this.$refs["fullPage"].clientHeight; //获取屏幕的宽度
      let scrollPage = this.$refs["fullPageContainer"]; // 获取执行tarnsform的元素
      let scrollHeight; // 计算滚动的告诉，是往上滚还往下滚
      scrollHeight = -(index - 1) * height + "px";
      scrollPage.style.transform = `translateY(${scrollHeight})`;
      this.fullpage.current = index;
    },
    mouseWheelHandle(event) {
      // 监听鼠标监听
      // 添加冒泡阻止
      let evt = event || window.event;
      if (evt.stopPropagation) {
        evt.stopPropagation();
      } else {
        evt.returnValue = false;
      }
      if (this.fullpage.isScrolling) {
        // 判断是否可以滚动
        return false;
      }
      let e = event.originalEvent || event;
      this.fullpage.deltaY = e.deltaY || e.detail; // Firefox使用detail
      if (this.fullpage.deltaY > 0) {
        this.next();
      } else if (this.fullpage.deltaY < 0) {
        this.pre();
      }
    },
  },
};
</script>

<style scoped lang="scss">
.fullPage {
  height: 100vh; //一定要设置，保证占满
  overflow: hidden; //一定要设置，多余的先隐藏
  background-color: rgb(189, 211, 186);
}
.fullPageContainer {
  width: 100%;
  height: 100vh;
  transition: all linear 0.5s;
}
.section {
  width: 100%;
  height: 100vh;
  background-position: center center;
  background-repeat: no-repeat;
}
.section1 {
  background-color: #1bbc9b;
}
.section2 {
  background-color: #4BBFC3;
}
.section3 {
  background-color: #7BAABE;
}
.section4 {
  background-color: #f90;
}
</style>

调用插件

手写代码不用添加依赖且完全可控，但是工作量大，可能存在不易解决的BUG。所以，调用其他开发者封装好的插件也是不错的选择。

在Github上搜索fullpage，最著名的便是 fullPage.js 这个仓库，高达34k个star。fullPage.js是封装地非常完善的插件，只需简单配置就可以实现漂亮的全屏滚动功能。fullpage简单演示html代码如下所示，参考自设计网站dowebok。

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <title>fullPage.js — 基本演示</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.9/fullpage.css">
    <style>
        .section {
            text-align: center;
            font: 50px "Microsoft Yahei";
            color: #fff;
        }
    </style>
    <script src="http://cdn.staticfile.org/jquery/1.8.3/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/4.0.9/fullpage.min.js"></script>
    <script>
        $(function () {
            $('#full_page').fullpage({
                sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90']
            });
        });
    </script>
</head>

<body>

    <div id="full_page">
        <div class="section">
            <h3>第一屏</h3>
            <p>fullPage.js — 基本演示</p>
        </div>
        <div class="section">
            <div class="slide">
                <h3>第二屏的第一屏</h3>
            </div>
            <div class="slide">
                <h3>第二屏的第二屏</h3>
            </div>
            <div class="slide">
                <h3>第二屏的第三屏</h3>
            </div>
        </div>
        <div class="section">
            <h3>第三屏</h3>
        </div>
        <div class="section">
            <h3>第四屏</h3>
            <p>这是最后一屏</p>
        </div>
    </div>

</body>

</html>