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

scroll-behavior属性使用方法

news 文章来源：https://blog.csdn.net/Yt0601/article/details/134993281 2025/1/11 10:53:06

定义和用法：

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>

相关文章：

scroll-behavior属性使用方法

定义和用法&#xff1a; scroll-behavior 属性规定当用户单击可滚动框中的链接时&#xff0c;是否平滑地&#xff08;具动画效果&#xff09;滚动位置&#xff0c;而不是直线跳转。 <style>element{/* 核心代码 */scroll-behavior: smooth;} </style> 属性值&am…...

编程日记 2023/12/18 8:32:12

Python Django 连接 PostgreSQL 操作实例

更多Python学习内容&#xff1a;ipengtao.com 大家好&#xff0c;我是彭涛&#xff0c;今天为大家分享 Python Django 连接 PostgreSQL 操作实例&#xff0c;全文3500字&#xff0c;阅读大约10分钟 在Web开发中&#xff0c;使用Django连接到PostgreSQL数据库是一种常见的选择。…...

编程日记 2023/12/18 8:30:09

5.实现简化版raft协议完成选举

1.设计 前面已经完成了netty的集成&#xff0c;接下来就是借助netty完成选举就行了。 针对选举&#xff0c;我们用到了VotRequestMessage、VotRespMessage、当节点下线时NodeOfflineMessage、NodeOnlineMessage、NodeOnlineRespMessage 1.1 节点详细的交互 1.2 对所有消息的…...

编程日记 2023/12/18 8:29:08

服装管理系统 简单实现

服装管理系统 项目使用jsp servletmysql实现&#xff1b; 登陆注册 首页 首页显示服装信息 服装管理 1添加服装 2修改服装 3分页查询服装 4导出服装信息 5 导入服装信息 代码结构截图 百度网盘 链接&#xff1a;https://pan.baidu.com/s/1zfLHGMnrYd-JtnhzS5elYQ 提取码…...

编程日记 2023/12/18 8:27:06

深度学习项目实战：垃圾分类系统

简介&#xff1a; 今天开启深度学习另一板块。就是计算机视觉方向&#xff0c;这里主要讨论图像分类任务–垃圾分类系统。其实这个项目早在19年的时候&#xff0c;我就写好了一个版本了。之前使用的是python搭建深度学习网络&#xff0c;然后前后端交互的采用的是java spring …...

编程日记 2023/12/18 8:26:05

C#浅拷贝和深拷贝数据

目录 一、浅拷贝 二、深拷贝 一、浅拷贝 就是把原来的数据&#xff0c;复制一份&#xff0c;但是2份数据是共享地址的&#xff0c;修改第一份数据或者修改第二份数据&#xff0c;都会一起改变&#xff0c;这可能不是我们程序中需要的场景。 下面我们演示一下&#xff0c;首…...

编程日记 2023/12/18 8:25:02

【JVM】4.运行时数据区（程序计数器、虚拟机栈）

文章目录 4.JVM的运行时数据区4.1 程序计数器4.2 Java虚拟机栈4.3 虚拟机栈内存溢出 4.JVM的运行时数据区 4.1 程序计数器 程序计数器&#xff08;PC&#xff09;会记录着下一行字节码指令的地址。执行完当前指令后&#xff0c;PC刷新&#xff0c;JVM的执行引擎根据程序计数器…...

编程日记 2023/12/18 8:21:58

算法：程序员的数学读书笔记

目录 ​0的故事 ​一、按位计数法 二、不使用按位计数法的罗马数字 三、十进制转二进制​​​​​​​ ​四、0所起到的作用​​​​​​​ 逻辑 一、为何逻辑如此重要 二、兼顾完整性和排他性 三、逻辑 四、德摩根定律 五、真值表 六、文氏图 七、卡诺图 八、逻…...

编程日记 2023/12/18 8:20:57

机器学习算法---时间序列

类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统计学检验箱…...

编程日记 2023/12/18 8:19:56

RK3568/RV1126/RV1109/RV1106 ISP调试方案

最近一直在做瑞芯微rv1126的开发&#xff0c;由于项目性质&#xff0c;与camera打的交道比较多&#xff0c;包括图像的采集&#xff0c;ISP处理&#xff0c;图像处理&#xff0c;H.264/H.265编解码等各个方面吧。学到了不少&#xff0c;在学习的过程中&#xff0c;也得到了不少…...

编程日记 2023/12/18 8:15:50

【TB作品】51单片机，语音出租车计价器

西交大题目 1.语音出租车计价器 一、功能要求: 1.具有可模拟出租车车轮转速传感器的硬件设计,可计量出租车所走的公 里数。 2.显示和语音播报里程、价格和等待红灯或堵车的计时价格: 3.具有等待计时功能 4.具有实时年月日显示和切换功能。 5.操作简单、界面友好。 二、设计建议…...

编程日记 2023/12/18 8:08:43

jmeter简单压测kafka

前言 这也是一个笔记&#xff0c;就是计划用jmeter做性能测试&#xff0c;但是这里是只要将数据放到kafka的topic里&#xff0c;后面查看下游业务处理能力。 一、方案 因为只要实现数据放到kafka&#xff0c;参考了下博友的方案&#xff0c;可行。 二、方案验证 详细过程就不…...

编程日记 2023/12/18 8:05:40

【漏洞复现】红帆OA iorepsavexml.aspx文件上传漏洞

漏洞描述 广州红帆科技深耕医疗行业20余年，专注医院行政管控，与企业微信、阿里钉钉全方位结合，推出web移动一体化办公解决方案——iOffice20（医微云）。提供行政办公、专业科室应用、决策辅助等信息化工具，采取平台化管理模式，取代医疗机构过往多系统分散式管理，实现医…...

编程日记 2023/12/18 8:03:39

04_Web框架之Django一

Web框架之Django一 学习目标和内容 1、能够描述Django的作用 2、能够使用Django创建应用 3、能够使用GET和POST请求方式进行传参 4、能够使用Django的函数式方法定义视图 5、能够进行Django的配置文件修改 6、能够基本使用Django的路由定义 一、Django相关介绍 1、什么是Djan…...

编程日记 2023/12/18 8:00:36

单机架构到分布式架构的演变

目录 1.单机架构 2.应用数据分离架构 3.应用服务集群架构 4.读写分离 / 主从分离架构 5.引入缓存 —— 冷热分离架构 6.垂直分库 7.业务拆分 —— 微服务 8.容器化引入——容器编排架构 总结 1.单机架构 初期&#xff0c;我们需要利用我们精干的技术团队&#xff0c;快…...

编程日记 2023/12/18 7:59:35

1.新入手的32位单片机资源和资料总览

前言&#xff1a; 学了将近1年的linux驱动和uboot&#xff0c;感觉反馈不足&#xff0c;主要是一直在学各种框架&#xff0c;而且也遇到了门槛&#xff0c;比如驱动部分&#xff0c;还不能随心所欲地编程&#xff0c;原因是有些外设的原理还不够深刻、有些复杂的底层驱动的代码…...

编程日记 2023/12/18 7:57:33

jmeter判断’响应断言‘两个变量对象是否相等

1、首先需要设置变量&#xff0c;json、正则、csv文件等变量 2、然后在响应断言中 ①JMeter Variable Name to use —— 输入一个变量&#xff0c;变量名即可 ② 模式匹配规则 ——相等 ③测试模式 ——输入引用的变量命${变量名} &#xff08;注意这里是需要添加一个测试模式…...

编程日记 2023/12/18 7:54:30

【Linux基础命令使用】

文章目录 一. 操作系统和文件及文件路径介绍二. 基础指令介绍三. 结束语 一. 操作系统和文件及文件路径介绍 什么是操作系统&#xff1f;操作系统是一款进行软硬件资源管理的软件为什么要进行软硬件资源管理&#xff1f;对上提供良好的稳定的运行服务----工具Linux指令和图形化…...

编程日记 2023/12/18 7:53:29

【JNA与C++基本使用示例】

JNA中java与C使用注意事项和代码示例 JNA关系映射表使用案列注意代码示例C代码java代码 JNA关系映射表 使用案列 注意 JNA只支持C方式的dll使用C的char* 作为返回值时&#xff0c;需要返回的变量为malloc分配的地址C的strlen函数只获得除/0以外的字符串长度 代码示例 C代码…...

编程日记 2023/12/18 7:52:28

HttpRunner接口自动化测试框架

简介 HttpRunner是一款面向 HTTP(S) 协议的通用测试框架&#xff0c;只需编写维护一份 YAML/JSON 脚本&#xff0c;即可实现自动化测试、性能测试、线上监控、持续集成等多种测试需求。 项目地址&#xff1a;GitHub - httprunner/httprunner: HttpRunner 是一个开源的 API/UI…...

编程日记 2023/12/18 7:49:26

云计算：Vmware 安装 FreeNAS

目录 一、实验 1.Vmware 安装 FreeNAS 2.配置Web界面 二、问题 1.iSCSI如何限定名称 2.LUN和LVM的区别 一、实验 1.Vmware 安装 FreeNAS &#xff08;1&#xff09;环境准备 VMware Workstation 17 FreeNAS相关安装部署镜像: 官网地址&#xff1a; https://download…...

编程日记 2023/12/18 7:46:23

数据库交付运维高级工程师-腾讯云TDSQL

数据库交付运维高级工程师-腾讯云TDSQL上机指导&#xff0c;付费指导&#xff0c;暂定99...

编程日记 2023/12/18 7:45:22

目标检测YOLO实战应用案例100讲-光伏电站热斑检测（续）

目录 2.5 图像重建方法实验及其结果分析 2.5.1 数据集与超参数 2.5.2 结果分析...

编程日记 2023/12/18 7:44:21

jmeter如何循环运行到csv文件最后一行后停止

1、首先在线程组中设置’循环次数‘–勾选永远 2、csv数据文件设置中设置&#xff1a; 遇到文件结束符再次循环?——改为&#xff1a;False 遇到文件结束符停止线程?——改为&#xff1a;True 3、再次运行就会根据文档的行数运行数据 &#xff08;如果需要在循环控制器中&…...

编程日记 2023/12/18 7:42:19

电路中的屏蔽罩作用及设计

1.1 屏蔽罩作用 1.1.1 屏蔽电子信号,防止外界的干扰或内部向外的辐射&#xff1a; 一般见于通信类电路PCB&#xff0c;主要一个无线通信产品上有的敏感器件、模拟、数字电路、DCDC电源电路&#xff0c;都需屏蔽隔离&#xff0c;是为了不影响其它电路&#xff0c;也有防止其它电…...

编程日记 2023/12/18 7:40:18

CodeBlocks定义异常：multiple definition of 和 first defined here

基于链表实现贪吃蛇案例时候&#xff0c;在CodeBlocks的CPP源文件定义函数和全局变量均报错 异常现象 在**自定义的cpp**文件定义全局变量、对象、函数等均出现重复定义和首次定义 multiple definition of Controller::showCopy() first defined here 异常解决方案 正确代码…...

编程日记 2023/12/18 7:39:17

RHEL7.5编译openssl1.1.1w源码包到rpm包

openssl1.1.1w下载地址 https://www.openssl.org/source/ 安装依赖包 yum -y install curl which make gcc perl perl-WWW-Curl rpm-build wget http://mirrors.aliyun.com/centos-vault/7.5.1804/os/x86_64/Packages/perl-WWW-Curl-4.15-13.el7.x86_64.rpm rpm -ivh pe…...

编程日记 2023/12/18 7:38:16

结构型设计模式（二）装饰器模式 适配器模式

装饰器模式 Decorator 1、什么是装饰器模式 装饰器模式允许通过将对象放入特殊的包装对象中来为原始对象添加新的行为。这种模式是一种结构型模式&#xff0c;因为它通过改变结构来改变被装饰对象的行为。它涉及到一组装饰器类&#xff0c;这些类用来包装具体组件。 2、为什…...

编程日记 2023/12/18 7:36:15

C#数据结构

C#数据结构 常见结构 1、集合 2、线性结构 3、树形结构 4、图形结构 Array/ArrayList/List 特点&#xff1a;内存上连续存储&#xff0c;节约空间&#xff0c;可以索引访问&#xff0c;读取快&#xff0c;增删慢 using System; namespace ArrayApplication {class MyAr…...

编程日记 2023/12/18 7:35:13

代码随想Day39 | 62.不同路径、63. 不同路径 II

62.不同路径 每次向右或者向下走两个选择&#xff0c;定义dp数组dp[i][j] 为到达索引ij的路径和&#xff0c;状态转移公式为 dp[i][j]dp[i-1][j]dp[i][j-1]&#xff0c;初始状态的第一行和第一列为1&#xff0c;从左上到右下开始遍历即可。详细代码如下&#xff1a; class Sol…...

编程日记 2023/12/18 7:34:11

前端做兼职网站/搜索引擎seo推广

http://acm.timus.ru/problem.aspx?space1&num1806 只要算法对 ural 一般不会卡时间的 这个题是一个简单的最短路 spfa 关键在于找边 找边的方法是 对于每一个点 枚举它的所有可能的变化 搜索是否有和变化后的字符串一样的 搜索的时候既可以用 map 也可以 自己写字典树 m…...

编程日记 2025/1/11 10:27:19

福田网站建设方案服务/百度链接收录提交入口

系统迁移&#xff0c;能够帮我们大大的节约装系统或者数据搬迁的时间。系统迁移其本质是以一个硬盘或者分区为源目标&#xff0c;将其系统、数据文件克隆到另一个硬盘或者分区。DiskGenius、Norton ghost等工具都有克隆硬盘、分区的能力&#xff0c;但是用作系统迁移很麻烦&…...

编程日记 2025/1/11 10:17:49

wordpress服务器要求/北京网站排名seo

在外部类中调用某一个实例的成员方法的方式&#xff1a; 1.面向具体类&#xff1a;创建一个该类的实例对象&#xff0c;通过该实例对象调用其成员方法 优点&#xff1a;编写时简单 缺点&#xff1a;高耦合&#xff0c;后期h代码维护难&#xff0c;外部类严重依赖该类&#xff…...

编程日记 2025/1/11 7:42:24

做网站接广告赚钱吗/广东seo推广公司

什么是Css Selector&#xff1f; Css Selector定位实际就是HTML的Css选择器的标签定位 工具 Css Selector的练习建议大家安装火狐浏览器后&#xff0c;下载插件&#xff0c;FireFinder 或 FireBug和FirePath组合使用。 Css Selector使用方法 1、Css Selector支持ID、Class的定位…...

编程日记 2025/1/11 7:30:15

wordpress qoob/seo算法

使用场景&#xff1a;在操作应用时常见toast弹框&#xff0c;通过toast弹框信息的获取判断当前的某个操作是否成功 引用的包&#xff1a;from selenium.webdriver.support import expected_conditions as EC,\expected_conditions from selenium.webdriver.common.by import By…...

编程日记 2025/1/11 6:22:17

合肥新站开发区管委会网站/武汉seo论坛

使用技术 LR.APP是基于uni-app开发的多端APP/小程序系统&#xff0c;设计理念是解决多端开发问题&#xff0c;使用时&#xff0c;开发者仅需一套代码&#xff0c;即可编译到iOS、Android、H5、小程序等多个平台。 LR.APP封装了跨端兼容的组件和api&#xff0c;如果你不熟悉un…...

编程日记 2025/1/11 4:04:05