scroll-behavior属性使用方法

定义和用法:

scroll-behavior 属性规定当用户单击可滚动框中的链接时,是否平滑地(具动画效果)滚动位置,而不是直线跳转。

<style>element{/* 核心代码 */scroll-behavior: smooth;}
</style>

属性值:

描述
auto默认值。允许在滚动框内的元素间直接跳转的“滚动效果”。
smooth允许在滚动框内的元素间平滑的“滚动效果”。

效果展示:

        说明:点击侧边栏的数字,实现左侧模块间的滚动切换效果

 

 详细代码:

<style>a {display: inline-block;width: 20px;text-decoration: none;color: #000;}nav {position: absolute;top: 50px;left: 300px;width: 20px;text-align: center;border: 1px solid black;z-index: 1;}scroll-container {/* 核心代码:缓慢滚动过渡 */scroll-behavior: smooth;display: block;width: 350px;height: 200px;overflow-y: scroll;border: 1px solid #ccc;}scroll-page {position: relative;display: flex;align-items: center;justify-content: center;height: 100%;font-size: 2em;}
</style>
<body><nav><a href="#page-1">1</a><a href="#page-2">2</a><a href="#page-3">3</a><a href="#page-4">4</a><a href="#page-5">5</a></nav><scroll-container><scroll-page id="page-1">模块1</scroll-page><scroll-page id="page-2">模块2</scroll-page><scroll-page id="page-3">模块3</scroll-page><scroll-page id="page-4">模块4</scroll-page><scroll-page id="page-5">模块5</scroll-page></scroll-container>
</body>

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

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

相关文章

云原生之深入解析减少Docker镜像大小的优化技巧

一、什么是 Docker&#xff1f; Docker 是一种容器引擎&#xff0c;可以在容器内运行一段代码&#xff0c;Docker 镜像是在任何地方运行应用程序而无需担心应用程序依赖性的方式。要构建镜像&#xff0c;docker 使用一个名为 Dockerfile 的文件&#xff0c;Dockerfile 是一个包…

linux修改用户uid和gid并且修改文件所有权(所属用户及所属用户组)(chown命令、chgrp命令)(批量修改查找并修改文件、目录uid和gid)

文章目录 修改Linux用户UID和GID以及文件所有权1. 修改用户的UID和GID1.1 用户UID和GID的概念1.2 修改用户UID1.3 修改用户GID 2. 修改文件所有权2.1 文件所有权的概念2.2 修改文件所有者&#xff08;chown命令&#xff09;2.3 修改文件所属用户组&#xff08;chgrp命令&#x…

Gitlab仓库推送到Gitee仓库的一种思路

文章目录 Gitlab仓库推送到Gitee仓库的一种思路1、创建Gitee的ssh公钥&#xff08;默认已有Gitlab的ssh公钥&#xff09;2、添加Gitlab远程仓库地址3、添加Gitee远程仓库地址4、拉取Gitlab远程仓库指定分支到本地仓库指定分支&#xff08;以test分支为例&#xff09;5、推送本地…

PyTorch机器学习与深度学习

近年来&#xff0c;随着AlphaGo、无人驾驶汽车、医学影像智慧辅助诊疗、ImageNet竞赛等热点事件的发生&#xff0c;人工智能迎来了新一轮的发展浪潮。尤其是深度学习技术&#xff0c;在许多行业都取得了颠覆性的成果。另外&#xff0c;近年来&#xff0c;Pytorch深度学习框架受…

早期的OCR是怎么识别图片上的文字的?

现在的OCR技术融合了人工智能技术&#xff0c;通过深度学习&#xff0c;无论是识别的准确率还是效果都非常不错&#xff0c;那您知道在早期的OCR是通过什么技术来实现的吗&#xff1f;如果您不知道&#xff0c;那么&#xff0c;就让我来告诉您&#xff1a;它主要是基于字符的几…

【工具使用-Qt】Qt如何查看帮助文档

一&#xff0c;简介 Qt不需要单独下载帮助文档&#xff0c;在安装的时候&#xff0c;就已经帮你下载好了&#xff0c;在目录&#xff1a;安装目录/Qt5.14.2/Docs/目录下了。 二&#xff0c;查看方法 打开IDE&#xff0c;点击“帮助”&#xff1a; 输入想要查找的内容&…

2312llvm,01基本介绍

LLVM设计的核心是它的IR. 在把LLVMIR翻译特定汇编语言时,LLVM首先将程序变换为(DAG)有向无环图,以更易选指(SelectionDAG)容易,然后变换回三地址指令,来调度指令(MachineFunction). 为了看清驱动编译程序时,调用的后续工具,用-###命令行参数: $ clang -### hello.c -o hello…

阿里云主导《Serverless 计算安全指南》国际标准正式立项!

日前&#xff0c;在韩国召开的国际电信联盟电信标准分局 ITU-T SG17 全会上&#xff0c;由阿里云主导的《Serverless 计算安全指南》国际标准正式立项成功。 图 1 项目信息 在现今数字化时代&#xff0c;Serverless 计算正逐渐成为云计算的一个新的发展方向&#xff0c;其灵活…

[GO]解决golang.org/x/ 下包下载不下来的问题

因为在项目中要使用到一个golang.org的包&#xff0c;但是因为墙的问题&#xff0c;官方方法已经无法使用&#xff0c;但是在github上存在一个镜像站可以使用&#xff0c;我们只需要将它克隆下来就可以正常使用了 mkdir -p $GOPATH/src/github.com/golang/ git clone https://…

【目标检测】视频输出体积太大?分析视频的编码与码率问题

在做视频目标检测时&#xff0c;发现一个问题&#xff0c;检测输出完的视频时大时小&#xff0c;有时输出体积过大&#xff0c;造成播放器播放时严重卡顿现象。本文就这一情况进行分析&#xff0c;并就该问题提出相关解决方案。 视频基础知识 隔行扫描和逐行扫描 早期电视台在…

【PHP】TP5验证规则自定义

目录 概述 独立验证 静态调用 内置规则 参考文档 概述 ThinkPHP5.0验证使用独立的\think\Validate类或者验证器进行验证。 独立验证 $rule [name > require|max:25,age > number|between:1,120,email > email, ];$msg [name.require > 名称必须,name.max…

恒创:多链路负载均衡是什么意思

多链路负载均衡是一种网络架构技术&#xff0c;它通过将流量分散到多个网络链路上&#xff0c;以提高网络的性能和可靠性。这种技术可以应用于各种场景&#xff0c;如数据中心、云计算、企业网络等。 在多链路负载均衡中&#xff0c;流量被分配到多个网络链路上&#xff0c;以…

【深度学习目标检测】十、基于yolov5的火灾烟雾识别(python,目标检测)

YOLOv5是目标检测领域一种非常优秀的模型&#xff0c;其具有以下几个优势&#xff1a; 1. 高精度&#xff1a;YOLOv5相比于其前身YOLOv4&#xff0c;在目标检测精度上有了显著的提升。YOLOv5使用了一系列的改进&#xff0c;如更深的网络结构、更多的特征层和更高分辨率的输入图…

MySQL! 一个开源的关系型数据库管理系统!

MySQL! 一个开源的关系型数据库管理系统! MySQL是一个开源的关系型数据库管理系统&#xff0c;广泛应用于各种场景&#xff0c;如网站、企业应用等。了解和配置MySQL数据库是每个开发人员的基本技能之一。本文将详细介绍MySQL的基本概念、安装、配置和使用。 一、MySQL基本概…

物联网对接使用蓝牙还是WiFi,应该如何选择?

蓝牙是一种无线技术协议&#xff0c;可促进连接设备之间短距离的数据交换。它依赖于物理邻近性并使用2.400至2.485 GHz之间的UHF&#xff08;超高频&#xff09;无线电波。蓝牙旨在创建个人区域网络&#xff08;PAN&#xff09;并在笔记本电脑、智能手机和外围设备等计算设备之…

Unity SRP 管线【第四讲:URP 阴影】

URP 全文源码解析参照 引入 在UniversalRenderer.cs/ line 505行处 此处已经准备好了所有渲染数据&#xff08;所有数据全部存储在了renderingData中&#xff09; 我们只用renderingData中的数据初设置mainLightShadows bool mainLightShadows m_MainLightShadowCasterPass…

深度学习 计算预测和真实值之间的差异

要计算预测和真实值之间的差异&#xff0c;可以首先将真实值加载到一个 pandas DataFrame 中&#xff0c;然后将预测值和真实值连接在一起&#xff0c;最后计算它们的差异。以下是一个示例代码&#xff1a;python import pandas as pd# 假设真实数据保存在 real_data_df 中&am…

【MAC】M2 安装mysql

一、docker下载地址 下载地址 二、安装docker完成 三、安装mysql 一、拉取镜像 # 拉取镜像 docker pull mysql# 或者 docker pull mysql:latest# 以上两个命令是一致的&#xff0c;默认拉取的就是 latest 版本的# 我们还可以用下面的命令来查看可用版本&#xff1a; docker…

Docker介绍,Docker安装

docker镜像仓库官网 一、Docker的基本概念 1.Docker的三大核心组件 docker 镜像 --------docker images docker 仓库---------docker registeries docker 容器---------docker containers 2.Docker 镜像 Docker镜像是运行docker容器时的只读模板&#xff0c;每一个镜像由一…

【Transformer】Transformer and BERT(1)

文章目录 TransformerBERT 太…完整了&#xff01;同济大佬唐宇迪博士终于把【Transformer】入门到精通全套课程分享出来了&#xff0c;最新前沿方向 学习笔记 Transformer 无法并行&#xff0c;层数比较少 词向量生成之后&#xff0c;不会变&#xff0c;没有结合语境信息的情…