当前位置： 首页 > news >正文

如何使用CSS实现一个全屏滚动效果（Fullpage Scroll）？

news 文章来源：https://blog.csdn.net/JHXL_/article/details/132419979 2024/11/29 4:37:12

聚沙成塔·每天进步一点点

  • ⭐ 专栏简介
  • ⭐ 实现全屏滚动效果的CSS和JavaScript示例
  • ⭐ HTML 结构
  • ⭐ CSS 样式 (styles.css)
  • ⭐ JavaScript 代码 (script.js)
  • ⭐ 实现说明
  • ⭐ 写在最后

⭐ 专栏简介

前端入门之旅：探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅

欢迎来到前端入门之旅！这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者，这里都将为你提供一个系统而又亲切的学习平台。在这个专栏中，我们将以问答形式每天更新，为大家呈现精选的前端知识点和常见问题解答。通过问答形式，我们希望能够更直接地回应读者们对于前端技术方面的疑问，并且帮助大家逐步建立起一个扎实的基础。无论是HTML、CSS、JavaScript还是各种常用框架和工具，我们将深入浅出地解释概念，并提供实际案例和练习来巩固所学内容。同时，我们也会分享一些实用技巧和最佳实践，帮助你更好地理解并运用前端开发中的各种技术。

在这里插入图片描述

不仅如此，我们还会定期推出一些项目实战教程，让你能够将所学知识应用到实际开发中。通过实际项目的练习，你将能够更好地理解前端开发的工作流程和方法论，并培养自己解决问题和独立开发的能力。我们相信，只有不断积累和实践，才能真正掌握前端开发技术。因此，请准备好迎接挑战，勇敢地踏上这段前端入门之旅！无论你是寻找职业转型、提升技能还是满足个人兴趣，我们都将全力以赴，为你提供最优质的学习资源和支持。让我们一起探索Web开发的奇妙世界吧！加入前端入门之旅，成为一名出色的前端开发者！ 让我们启航前端之旅

⭐ 实现全屏滚动效果的CSS和JavaScript示例

全屏滚动效果通常是为了创建具有多个全屏幕部分的页面，用户可以通过滚动或其他交互手段切换这些部分。下面是一个使用HTML、CSS和JavaScript实现全屏滚动效果的示例。

⭐ HTML 结构

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="styles.css"><title>全屏滚动示例</title>
</head>
<body><div class="fullpage"><section class="section">第一屏内容</section><section class="section">第二屏内容</section><section class="section">第三屏内容</section><!-- 可以继续添加更多屏幕内容 --></div><script src="script.js"></script>
</body>
</html>

⭐ CSS 样式 (styles.css)

/* 设置全屏滚动容器的高度为视窗高度 */
html, body {height: 100%;margin: 0;overflow: hidden;
}.fullpage {display: flex;flex-direction: column;height: 100%;overflow: hidden;
}.section {flex: 1;display: flex;justify-content: center;align-items: center;font-size: 2em;background-color: #f9f9f9;transition: transform 0.8s ease-in-out;
}

⭐ JavaScript 代码 (script.js)

const sections = document.querySelectorAll('.section');
let currentSectionIndex = 0;function scrollToSection(index) {sections[index].scrollIntoView({ behavior: 'smooth' });
}window.addEventListener('wheel', (e) => {const deltaY = e.deltaY;if (deltaY > 0) {// 向下滚动if (currentSectionIndex < sections.length - 1) {currentSectionIndex++;scrollToSection(currentSectionIndex);}} else if (deltaY < 0) {// 向上滚动if (currentSectionIndex > 0) {currentSectionIndex--;scrollToSection(currentSectionIndex);}}
});// 如果需要其他交互方式切换屏幕，可以根据需求添加事件处理逻辑

⭐ 实现说明

这个示例创建了一个简单的全屏滚动效果。关键部分包括：

  1. 在HTML中，我们使用了一个包含多个屏幕部分的容器 <div class="fullpage">，每个屏幕部分用 <section class="section"> 标签表示。

  2. CSS样式设置了容器的高度为视窗高度，并使用Flex布局将各个屏幕部分垂直堆叠。屏幕部分的样式可以根据需求自定义。

  3. JavaScript代码监听滚轮事件，根据滚动方向切换屏幕部分。当用户向下滚动时，如果当前屏幕不是最后一屏，则滚动到下一屏；当用户向上滚动时，如果当前屏幕不是第一屏，则滚动到上一屏。滚动效果通过 scrollIntoView 方法实现。

⭐ 写在最后

本专栏适用读者比较广泛，适用于前端初学者；或者没有学过前端对前端有兴趣的伙伴，亦或者是后端同学想在面试过程中能够更好的展示自己拓展一些前端小知识点，所以如果你具备了前端的基础跟着本专栏学习，也是可以很大程度帮助你查漏补缺，由于博主本人是自己再做内容输出，如果文中出现有瑕疵的地方各位可以通过主页的左侧联系我，我们一起进步，与此同时也推荐大家几份专栏，有兴趣的伙伴可以订阅一下：除了下方的专栏外大家也可以到我的主页能看到其他的专栏；

前端小游戏（免费）这份专栏将带你进入一个充满创意和乐趣的世界，通过利用HTML、CSS和JavaScript的基础知识，我们将一起搭建各种有趣的页面小游戏。无论你是初学者还是有一些前端开发经验，这个专栏都适合你。我们会从最基础的知识开始，循序渐进地引导你掌握构建页面游戏所需的技能。通过实际案例和练习，你将学会如何运用HTML来构建页面结构，使用CSS来美化游戏界面，并利用JavaScript为游戏添加交互和动态效果。在这个专栏中，我们将涵盖各种类型的小游戏，包括迷宫游戏、打砖块、贪吃蛇、扫雷、计算器、飞机大战、井字游戏、拼图、迷宫等等。每个项目都会以简洁明了的步骤指导你完成搭建过程，并提供详细解释和代码示例。同时，我们也会分享一些优化技巧和最佳实践，帮助你提升页面性能和用户体验。无论你是想寻找一个有趣的项目来锻炼自己的前端技能，还是对页面游戏开发感兴趣，前端小游戏专栏都会成为你的最佳选择。点击订阅前端小游戏专栏

在这里插入图片描述

Vue3通透教程【从零到一】（付费） 欢迎来到Vue3通透教程！这个专栏旨在为大家提供全面的Vue3相关技术知识。如果你有一些Vue2经验,这个专栏都能帮助你掌握Vue3的核心概念和使用方法。我们将从零开始,循序渐进地引导你构建一个完整的Vue应用程序。通过实际案例和练习,你将学会如何使用Vue3的模板语法、组件化开发、状态管理、路由等功能。我们还会介绍一些高级特性,如Composition API和Teleport等,帮助你更好地理解和应用Vue3的新特性。在这个专栏中,我们将以简洁明了的步骤指导你完成每个项目,并提供详细解释和示例代码。同时,我们也会分享一些Vue3开发中常见的问题和解决方案,帮助你克服困难并提升开发效率。无论你是想深入学习Vue3或者需要一个全面的指南来构建前端项目,Vue3通透教程专栏都会成为你不可或缺的资源。点击订阅Vue3通透教程【从零到一】专栏

在这里插入图片描述

TypeScript入门指南（免费） 是一个旨在帮助大家快速入门并掌握TypeScript相关技术的专栏。通过简洁明了的语言和丰富的示例代码，我们将深入讲解TypeScript的基本概念、语法和特性。无论您是初学者还是有一定经验的开发者，都能在这里找到适合自己的学习路径。从类型注解、接口、类等核心特性到模块化开发、工具配置以及与常见前端框架的集成，我们将全面覆盖各个方面。通过阅读本专栏，您将能够提升JavaScript代码的可靠性和可维护性，并为自己的项目提供更好的代码质量和开发效率。让我们一起踏上这个精彩而富有挑战性的TypeScript之旅吧！点击订阅TypeScript入门指南专栏

在这里插入图片描述

相关文章：

如何使用CSS实现一个全屏滚动效果（Fullpage Scroll）？

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ 实现全屏滚动效果的CSS和JavaScript示例⭐ HTML 结构⭐ CSS 样式 (styles.css)⭐ JavaScript 代码 (script.js)⭐ 实现说明⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦…...

编程日记 2023/8/22 9:46:41

Docker之Compose

目录 前言 1.1Docker Swarm与Docker Compose 1.1.1Docker Swarm 1.1.2Docker Compose 1.1.2.1 三层容器 ​编辑 二、YAML 2.1YAML概述 2.2注意事项 2.3Docker Compose 环境安装 2.3.1下载 三、Docker-Compose配置常用字段 四、Docker-compose常用命令 五、Docker…...

编程日记 2023/8/22 9:45:40

安装chromedriver 115，对应chrome版本115（经检验，116也可以使用）

目录 1. 查看Chrome浏览器的版本2. 找到对应的chromedriver3. 安装ChromeDriver 1. 查看Chrome浏览器的版本 点进这个网站查看&#xff1a;chrome://settings/help &#xff08;真是的&#xff0c;上一秒还是115版本&#xff0c;更新后就是116版本了&#xff0c;好在chromedi…...

编程日记 2023/8/22 9:44:39

排序算法：插入排序

插入排序的思想非常简单&#xff0c;生活中有一个很常见的场景&#xff1a;在打扑克牌时&#xff0c;我们一边抓牌一边给扑克牌排序&#xff0c;每次摸一张牌&#xff0c;就将它插入手上已有的牌中合适的位置&#xff0c;逐渐完成整个排序。 插入排序有两种写法&#xff1a; 交…...

编程日记 2023/8/22 9:43:37

掌握AI助手的魔法工具：解密Prompt（提示）在AIGC时代的应用「上篇」

在当今的AIGC时代&#xff0c;我们面临着越来越多的人工智能技术和应用。其中一个引人注目的工具就是Prompt&#xff08;提示&#xff09;。它就像是一种魔法&#xff0c;可以让我们与AI助手进行更加互动和有针对性的对话。那么&#xff0c;让我们一起来了解一下Prompt&#xf…...

编程日记 2023/8/22 9:42:35

JMeter - 接口压力测试工具简单使用

【启动前配置】 启动JMeter前可以先配置语言和编码： 修改：E:\JMeter\apache-jmeter-5.5\bin\jmeter.properties文件中： 1.language=en # 指定语言 language=zh_CN 2.sampleresult.default.encoding=ISO-8859-1 # 指定编码 UTF-8 sampleresult.default.encoding=UTF-8 也…...

编程日记 2023/8/22 9:41:34

【C++入门到精通】C++入门 —— priority_queue(STL)优先队列

阅读导航 前言一、priority_queue简介1. 概念2. 特点 二、priority_queue使用1. 基本操作2. 底层结构 三、priority_queue模拟实现⭕ C代码⭕priority_queue中的仿函数 总结温馨提示 前言 ⭕文章绑定了VS平台下std::priority_queue的源码&#xff0c;大家可以下载了解一下&…...

编程日记 2023/8/22 9:40:32

静态代码扫描工具 Sonar 配置及使用

概览 Sonar 是一个用于代码质量管理的开放平台。通过插件机制&#xff0c;Sonar 可以集成不同的测试工具&#xff0c;代码分析工具&#xff0c;以及持续集成工具。与持续集成工具&#xff08;例如 Hudson/Jenkins 等&#xff09;不同&#xff0c;Sonar 并不是简单地把不同的代…...

编程日记 2023/8/22 9:39:30

docker 03(docker 容器的数据卷)

一、数据卷的概念和作用 删除后&#xff0c;数据也没了。 不能 数据卷 是宿主机中的一个目录或文件当容器目录和数据卷目录绑定后&#xff0c;对方的修改会立即同步一个数据卷可以被多个容器同时挂载 作用&#xff1a; 容器数据持久化 外部机器和容器间接通信 容器之间数据交换…...

编程日记 2023/8/22 9:38:28

【04】基础知识：typescript中的类

一、es5 对象 1、定义 类&#xff08;对象&#xff09; 原型链上的属性和方法会被多个实例共享。构造函数中的属性和方法不会。 // 自定义构造函数 function Person(name, age) {this.name namethis.age agethis.getInfo function() {console.log(${this.name} - ${this.…...

编程日记 2023/8/22 9:37:27

CCClippingNode：在游戏中实现遮罩效果、剪切效果，以涂抹糖霜为例，如何更好的实现涂抹效果，提高用户的游戏体验

CCClippingNode&#xff1a;在游戏中实现遮罩效果、剪切效果&#xff0c;以涂抹糖霜为例&#xff0c;如何更好的实现涂抹效果 设备/引擎&#xff1a;Mac&#xff08;11.6&#xff09;/cocos2d-x 开发工具&#xff1a;Xcode&#xff08;13.0&#xff09; 开发需求&#xff1a…...

编程日记 2023/8/22 9:36:24

cuda gdb调试

如果cudaDeviceEnablePeerAccess函数不支持或不起作用&#xff0c;您仍然可以尝试其他方法来实现GPU之间的数据交换和通信。以下是一些替代方法&#xff1a; 通过主机内存进行数据传输&#xff1a; 如果GPU之间的数据交换不是非常频繁&#xff0c;您可以将数据从一个GPU复制到…...

编程日记 2023/8/22 9:35:21

【vim 学习系列文章 5 - cscope 过滤掉某些目录】

文章目录 cscope 过滤目录介绍 cscope 过滤目录介绍 第一步创建自己的cscope脚本~/.local/bin/cscope.sh&#xff0c;如下&#xff1a; function my_cscope() {CODE_PATHpwdecho "$CODE_PATH"echo "start cscope...."if [ ! -f "$CODE_PATH/cscope.…...

编程日记 2023/8/22 9:34:20

实验三 HBase1.2.6安装及配置

系列文章目录 文章目录 系列文章目录前言一、HBase1.2.6的安装二、HBase1.2.6的配置2.1 单机模式配置2.2 伪分布式模式配置 总结参考 前言 在安装HBase1.2.6之前&#xff0c;需要安装好hadoop2.7.6。 本篇文章参考&#xff1a;HBase2.2.2安装和编程实践指南 一、HBase1.2.6的安…...

编程日记 2023/8/22 9:33:12

LightDB sequence支持MAXVALUE最大值与Oracle相同

功能介绍 Oracle数据库在创建sequence的时候可以支持设置maxvalue 为9999999999999999999999999999&#xff0c;这样的SQL在LightDB23.3版本之前都是执行失败的。为了方便Oracle用户迁移到LightDB上&#xff0c;在LightDB23.3版本上&#xff0c;增加了sequence支持maxvalue设置…...

编程日记 2023/8/22 9:32:10

二、Kafka快速入门

目录 2.1 安装部署1、【单机部署】2、【集群部署】 2.2 Kafka命令行操作1、查看topic相关命令参数2、查看当前kafka服务器中的所有Topic3、创建 first topic4、查看 first 主题的详情5、修改分区数&#xff08;注意&#xff1a;分区数只能增加&#xff0c;不能减少&#xff09;…...

编程日记 2023/8/22 9:31:09

消息中间件-kafka实战-第五章-kafka重复消费、顺序消费及死信队列

目录 一、参考二、路由规则&#xff08;分片规则&#xff09;三、触发重复消费的场景场景一&#xff1a;触发rebalance问题描述可能原因实际影响参数在kafka0.10.1 之前:在kafka0.10.1之后&#xff1a;解决方案 场景二&#xff1a;服务宕机可能原因解决方案 消息幂等性 四、kaf…...

编程日记 2023/8/22 9:30:08

python爬虫9：实战2

python爬虫9&#xff1a;实战2 前言 ​ python实现网络爬虫非常简单&#xff0c;只需要掌握一定的基础知识和一定的库使用技巧即可。本系列目标旨在梳理相关知识点&#xff0c;方便以后复习。 申明 ​ 本系列所涉及的代码仅用于个人研究与讨论&#xff0c;并不会对网站产生不好…...

编程日记 2023/8/22 9:29:07

从业务层的代码出发，去排查通用框架代码崩溃的问题

目录 1、问题说明 1.1、Release下崩溃&#xff0c;Debug下很难复现 1.2、用Windbg打开dump文件&#xff0c;发现崩溃在通用的框架代码中 2、进一步分析 2.1、使用IDA查看汇编代码尝试寻找崩溃的线索 2.2、在Windbg中查看相关变量的值 2.3、查看最近代码的修改记录&#…...

编程日记 2023/8/22 9:28:05

LLM预训练大型语言模型Pre-training large language models

在上一个视频中&#xff0c;您被介绍到了生成性AI项目的生命周期。 如您所见&#xff0c;在您开始启动您的生成性AI应用的有趣部分之前&#xff0c;有几个步骤需要完成。一旦您确定了您的用例范围&#xff0c;并确定了您需要LLM在您的应用程序中的工作方式&#xff0c;您的下…...

编程日记 2023/8/22 9:27:04

[Machine Learning] 损失函数和优化过程

文章目录 机器学习算法的目的是找到一个假设来拟合数据。这通过一个优化过程来实现&#xff0c;该过程从预定义的 hypothesis class&#xff08;假设类&#xff09;中选择一个假设来最小化目标函数。具体地说&#xff0c;我们想找到 arg min ⁡ h ∈ H 1 n ∑ i 1 n ℓ ( X i…...

编程日记 2023/8/22 9:26:02

serialVersionUID 有何用途？如果没定义会有什么问题？

序列化是将对象的状态信息转换为可存储或传输的形式的过程。我们都知道&#xff0c;Java 对象是保持在 JVM 的堆内存中的&#xff0c;也就是说&#xff0c;如果 JVM 堆不存在了&#xff0c;那么对象也就跟着消失了。 而序列化提供了一种方案&#xff0c;可以让你在即使 JVM 停机…...

编程日记 2023/8/22 9:25:01

C# OpenCvSharp DNN 二维码增强 超分辨率

效果 项目 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using OpenCvSharp; using OpenCvSharp.Dnn; using OpenCvSh…...

编程日记 2023/8/22 9:23:59

this.$refs使用方法

深入理解和使用this.$refs——Vue.js的利器 Vue.js是一个流行的JavaScript框架&#xff0c;用于构建交互性强大的用户界面。在Vue.js中&#xff0c;this.$refs是一个强大的特性&#xff0c;允许你直接访问组件中的DOM元素或子组件实例。本教程将带你深入了解this.$refs的使用方…...

编程日记 2023/8/22 9:22:57

Ohio主题 - 创意组合和代理机构WordPress主题

Ohio主题是一个精心制作的多用途、简约、华丽、多功能的组合和创意展示主题&#xff0c;具有敏锐的用户体验&#xff0c;您需要构建一个现代且实用的网站&#xff0c;并开始销售您的产品和服务。它配备了最流行的WordPress页面构建器 WPBakery Page Builder&#xff08;以前称为…...

编程日记 2023/8/22 9:21:55

mysql 、sql server trigger 触发器

sql server mySQL create trigger 触发器名称 { before | after } [ insert | update | delete ] on 表名 for each row 触发器执行的语句块## 表名&#xff1a; 表示触发器监控的对象 ## before | after : 表示触发的时间&#xff0c;before : 表示在事件之前触发&am…...

编程日记 2023/8/22 9:20:54

自然语言处理从入门到应用——LangChain：索引（Indexes）-[检索器（Retrievers）]

分类目录&#xff1a;《自然语言处理从入门到应用》总目录 检索器&#xff08;Retrievers&#xff09;是一个通用的接口&#xff0c;方便地将文档与语言模型结合在一起。该接口公开了一个get_relevant_documents方法&#xff0c;接受一个查询&#xff08;字符串&#xff09;并返…...

编程日记 2023/8/22 9:19:53

春秋云境：CVE-2022-0543（Redis 沙盒逃逸漏洞）

目录 一、i春秋题目 二、CVE-2022-0543&#xff1a;&#xff08;redis沙盒逃逸&#xff09; 漏洞介绍&#xff1a; 漏洞复现&#xff1a; 一、i春秋题目 靶标介绍&#xff1a; Redis 存在代码注入漏洞&#xff0c;攻击者可利用该漏洞远程执行代码。 进入题目&#xff1a;…...

编程日记 2023/8/22 9:18:52

关于uniapp组件的坑

关于uniapp组件的坑 我有一个组件写的没什么问题,但是报下面这个错误 is not found in path “components/xxx/xxxx” (using by “components/yyy/yyy”) 最后经过排除发现命名需要驼峰命名法 我原本组件命名: 文件夹名 test_tttt 文件名 test_tttt.vue 不行 最后改成文件…...

编程日记 2023/8/22 9:17:49

AIGC与软件测试的融合

一、ChatGPT与AIGC 生成式人工智能——AIGC&#xff08;Artificial Intelligence Generated Content&#xff09;&#xff0c;是指基于生成对抗网络、大型预训练模型等人工智能的技术方法&#xff0c;通过已有数据的学习和识别&#xff0c;以适当的泛化能力生成相关内容的技术。…...

编程日记 2023/8/22 9:16:48

艺术网站定制/人民日报今日头条新闻

PCB线间距设多少好&#xff1f;过孔的大小与线宽有没有固定关系&#xff1f;走线的Via孔附近加接地Via孔的作用及原理一般加工能力:line:4milgap:4milvia:10mil/24mil最好:line:>8milgap:>8milvia:>12mil/25mil在走线的Via孔附近加接地Via孔的作用及原理是什么&#x…...

编程日记 2024/11/29 3:31:29

企业官网图片/桔子seo网

记录一下使用puppeteer遇到反爬情况时的设置处理 启动设置webdriverwindow.chromeuserAgentpluginslanguagespermissionsWebGL# 启动设置 const browser = await puppeteer.launch({headle...

编程日记 2024/11/29 0:08:00

政府网站设计要求/产品软文代写

(1)static static关键字&#xff1a;静态。 注意&#xff1a;静态成员在类中&#xff0c;只有一份。非静态成员在对象中、有多少个对象、就有多少分成员。 (2)final final修饰变量&#xff1a;不能被更改。 final修饰方法&#xff1a;不能被覆盖。 final修饰类&#xff1a…...

编程日记 2024/11/28 15:18:47

模板建站服务公司/搜索引擎调词平台多少钱

前言 SpringSpringMVCMyBatiseasyUI整合进阶篇&#xff08;一&#xff09;设计一套好的RESTful APISpringSpringMVCMyBatiseasyUI整合进阶篇&#xff08;二&#xff09;RESTful API实战笔记(接口设计及Java后端实现)SpringSpringMVCMyBatiseasyUI整合进阶篇&#xff08;四&…...

编程日记 2024/11/28 14:30:16

软件应用下载安装/seo优化的主要内容

1.1 案例四&#xff1a;使用JS完成后台数据展示的隔行换色的表格&#xff1a;1.1.1 需求&#xff1a;在后台展示数据的页面上&#xff0c;通常使用表格标签进行数据的展示.没有背景的表格比较难看的&#xff0c;可以使用JS控制表格的隔行换色.1.1.2 分析&#xff1a;1.1.2.1 技…...

编程日记 2024/11/28 10:29:34

北京市住房和城乡建设厅网站/成都最新疫情

Solis BioDyne来源于欧盟-爱沙尼亚共和国&#xff0c;自1995年以来&#xff0c;Solis BioDyne一直致力于开发和生产高品质的生命科学试剂&#xff0c;现已成为当今欧洲领先的试剂供应商之一。高标准的生产标准和服务使Solis BioDyne成为全球值得信赖的首选PCR供应商。我们的DNA…...

编程日记 2024/11/28 8:20:01