HTML案例：全屏切换滚动效果

一个父级div包裹4个子级div，4个子盒子的宽高占满当前屏幕，滚动导航条自动切换到下一页/上一页

1、HTML代码

  <style>* {margin: 0;padding: 0;}.container {height: 100vh;overflow-y: scroll;}.container div {width: 100%;height: 100vh;}</style>
</head><body><div class="container"><div class="box" style="background-color: antiquewhite;"><h1>第一页</h1></div><div class="box" style="background-color: chartreuse;"><h1>第二页</h1></div><div class="box" style="background-color: coral;"><h1>第三页</h1></div><div class="box" style="background-color: deeppink;"><h1>第四页</h1></div></div>

2、父盒子添加scroll-snap-type属性

    .container {height: 100vh;overflow-y: scroll;/* 添加属性：参数1：x/y，确定沿哪条轴进行滚动参数2mandatory： 检测距离大于某个程度，就进行滚动到下一屏*/scroll-snap-type: y mandatory;}

3、子盒子添加scroll-snap-align属性

    .container div {width: 100%;height: 100vh;/* 第三步：给子盒子添加属性可选值：start：开始部分end：结束部分center：中间部分*/scroll-snap-align: start;}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/392.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

Java设计模式之结构型-桥接模式（UML类图+案例分析）

Java设计模式之结构型-桥接模式（UML类图+案例分析）

目录 一、基础概念 二、UML类图 三、角色设计 四、案例分析 1、支付方式 2、支付渠道 五、总结 一、基础概念 桥接模式&#xff08;Bridge Pattern&#xff09;是一种结构型设计模式&#xff0c;其主要目的是“将抽象部分与实现部分分离&#xff0c;使它们都可以独立地…
阅读更多...
[解决Github 克隆错误] unable to access ‘xxx‘: Recv failure: Connect

[解决Github 克隆错误] unable to access ‘xxx‘: Recv failure: Connect

1.错误描述&#xff1a; 从GitHub上克隆仓库到本地&#xff0c;出现错误&#xff1a; unable to access https://github.com/xxxx: Recv failure: Connection was reset。 克隆失败。 2.第一次解决此问题&#xff1a;从终端输入&#xff1a; git config --global http.sslVer…
阅读更多...
安装TensorFlow时报错 zsh: illegal hardware instruction python

安装TensorFlow时报错 zsh: illegal hardware instruction python

解决方案参考 https://stackoverfLow.com/questions/65383338/zsh-illegal-hardware-instruction-python-when-installing-tensorflow-on-macbook 以下为详细步骤 安装python3.8.5环境 下载tensorflow-2.4.1-py3-none-any.whl文件 下载地址&#xff1a;https://drive.google…
阅读更多...
GOPATH、GOROOT（VSCode编写第一个go程序）

GOPATH、GOROOT（VSCode编写第一个go程序）

1. GOROOT和GOPATH GOROOT 和 GOPATH 都是 Go 语言中的环境变量&#xff0c;用于指定 Go 工具链和工作区的路径。 GOROOT 指定了 Go 工具链的安装路径&#xff0c;它包含了 Go 语言的标准库、编译器等工具。在使用 Go 编译器、运行时等工具时&#xff0c;它们会默认从 GOROOT…
阅读更多...
LabVIEW开发图像采集和图像处理程序

LabVIEW开发图像采集和图像处理程序

LabVIEW开发图像采集和图像处理程序 扫描电子显微镜&#xff08;SEM&#xff09;是一种功能强大的工具&#xff0c;广泛用于高分辨率的生物和半导体样品检测。然而&#xff0c;对于大面积或3D成像&#xff0c;SEM成像是一个耗时的过程。MBSEM旨在通过同时扫描多个像素来减少采…
阅读更多...
Android 中的动画有哪几类，它们的特点和区别是什么

Android 中的动画有哪几类，它们的特点和区别是什么

Android 中的动画有哪几类&#xff0c;它们的特点和区别是什么 在Android中&#xff0c;常见的动画类型可以分为以下几类&#xff1a; View 动画&#xff08;View Animation&#xff09;&#xff1a; 特点&#xff1a;View动画是一种基于View对象的动画&#xff0c;通过对Vi…
阅读更多...
Vue3使用element-plus实现弹窗效果-demo

Vue3使用element-plus实现弹窗效果-demo

使用 <ShareDialog v-model"isShow" onChangeDialog"onChangeDialog" /> import ShareDialog from ./ShareDialog.vue; const isShow ref(false); const onShowDialog (show) > {isShow.value show; }; const onChangeDialog (val) > {co…
阅读更多...
关于 Eclipse 的一场 “三角关系”

关于 Eclipse 的一场 “三角关系”

上个世纪 90 年代&#xff0c;世界上的计算机要么不联网&#xff0c;要么在企业内部联网。但是&#xff0c;在互联网的概念下&#xff0c;计算机之间共享信息和资源的需求成为了必要。 1995 年 5 月&#xff0c;Java 横空出世。Java 的父亲是当时凭借 Solaris 操作系统风头正盛…
阅读更多...
springboot集成quartz（集群）实现任务定时/立即执行

springboot集成quartz（集群）实现任务定时/立即执行

添加pom依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-quartz</artifactId></dependency><dependency><groupId>com.alibaba</groupId><artifactId>druid</a…
阅读更多...
vue3笔记-基础篇

vue3笔记-基础篇

vue3笔记 第一章 基础篇 MVVM框架 vue数据绑定方法 Object.defineProperty() vue2使用的数据绑定方法 var obj {} Object.defineProperty(obj,"myname",{get(){consloe.log("get")}set(value){console.log("set",value)} }proxy代理 vue…
阅读更多...
【C#】五种单例模式详解

【C#】五种单例模式详解

单例模式有五种&#xff1a; 饿汉模式、懒汉模式、双重锁懒汉模式、静态内部类模式、枚举模式。 1.饿汉式 public class SingleTon1 { private static SingleTon1 instance new SingleTon1(); private SingleTon1() { }public SingleTon1 getInstance(){return instance; …
阅读更多...
Golang 中的数组Array以及Slice底层实现

Golang 中的数组Array以及Slice底层实现

1、Array(数组) 数组是指一系列同一类型数据的集合。数组中包含的每个数据被称为数组元素 (element)，这种类型可以是任意的原始类型，比如 int 、 string 等，也可以是用户自定义的类型。一个数组包含的元素个数被称为数组的长度。 在 Golang 中数组是一个长度固定的数据类…
阅读更多...
【朱颜不曾改，芳菲万户香。AIGC人物图片创作---InsCode Stable Diffusion 美图活动一期】

【朱颜不曾改，芳菲万户香。AIGC人物图片创作---InsCode Stable Diffusion 美图活动一期】

【朱颜不曾改&#xff0c;芳菲万户香。AIGC人物图片创作 ---InsCode Stable Diffusion 美图活动一期】 本文目录&#xff1a; 一、 Stable Diffusion 模型在线使用 1.1、模板运行环境配置 1.2、运行InsCode平台的Stable Diffusion模板 二、Stable Diffusion主界面功能 2.…
阅读更多...
数据结构——各种常见算法的实现方法和思路

数据结构——各种常见算法的实现方法和思路

文章目录 常见的排序算法类型复杂度和稳定性 1.冒泡排序2.直接插入排序3.希尔排序4.简单选择排序方法1&#xff1a;双向遍历选择排序方法2&#xff1a;单向遍历选择排序 5.归并排序方法1&#xff1a;递归方法2&#xff1a;非递归 6.快速排序方法1&#xff1a;随机取keyi方法2&a…
阅读更多...
MAC下将jar包安装到本地maven仓库

MAC下将jar包安装到本地maven仓库

在终端执行命令如下&#xff1a; mvn install:install-file "-Dfile/Users/kkeer/lost_lib/slf4j-1.7.2.jar" "-DgroupIdorg.slf4j" "-DartifactIdslf4j-log4j12" "-Dversion1.7.2" "-Dpackagingjar" "-DgeneratePomt…
阅读更多...
thinkphp6 动态开启debug模式

thinkphp6 动态开启debug模式

1、找到config/app.php 2、自定义开启debug参数名称:示例参数为debug,可以根据自己项目情况自定义 3、必须同时设置App::debug 和 Env::set(APP_DEBUG) <?php // ---------------------------------------------------------------------- // | 应用设置 // --------…
阅读更多...
TiDB字符集和时区

TiDB字符集和时区

TiDB 字符集和时区 mysql> select version; -------------------------------------- | version | -------------------------------------- | 5.7.10-TiDB-v2.1.0-beta-179-g5a0fd2d | -------------------------------------- 1 row in set (0.00 sec) mysql> …
阅读更多...
谈 Delphi 中 JSON 的简便操作（非常简单）

谈 Delphi 中 JSON 的简便操作（非常简单）

我曾有讲过Delphi操作JSON的方法&#xff0c;特别是这一篇【delphi】类和记录的 helpers&#xff08;助手&#xff09;。但是因为当时是主要介绍的是Delphi的Helper&#xff0c;大家可能并没注意到Delphi中JSON的简便操作方法。 早期Delphi并没有自己的JSON操作库&#xff0c;大…
阅读更多...
了解 JVM - 认识垃圾回收机制与类加载过程

了解 JVM - 认识垃圾回收机制与类加载过程

前言 本篇通过介绍JVM是什么&#xff0c;认识JVM的内存区域的划分&#xff0c;了解类加载过程&#xff0c;JVM中垃圾回收机制&#xff0c;从中了解到垃圾回收机制中如何找到存活对象的方式&#xff0c;引用计数与可达性分析的方式&#xff0c;再释放垃圾对象时使用的方式&…
阅读更多...
Kerberos协议详解

Kerberos协议详解

0x01 kerberos协议的角色组成 Kerberos协议中存在三个角色&#xff1a; 客户端(Client)&#xff1a;发送请求的一方 服务端(Server)&#xff1a;接收请求的一方 密钥分发中心(Key distribution KDC) 密钥分发中心分为两个部分&#xff1a; AS(Authentication Server)&…
阅读更多...
最新文章

Copyright @ 2022~2023