CSS篇-让页面平滑滚动 css3实现平滑滑动
yuyutoo 2024-10-12 00:22 12 浏览 0 评论
先看个锚点定位的例子
发现页面唰的一些就到顶部了，快到我们懵逼了。。。
开始解决
scroll-behavior
CSS属性 scroll-behavior 为一个滚动框指定滚动行为，其他任何的滚动，例如那些由于用户行为而产生的滚动，不受这个属性的影响。在根元素中指定这个属性时，它反而适用于视窗。
scroll-behavior:smooth 写在滚动容器元素上，可以让容器的滚动变得平滑。
在网页默认滚动是在<html>标签上，移动端大多数在<body>标签上。
我们可以这样加：
html,
body { scroll-behavior:smooth; }
加了以后的效果如下：
这是录制的GIF图，效果没那么好。 大家可以动手试一下，滑动体验非常不错。
缺点
兼容性不够好
当然我们可以通过js来做个类似
Element.scrollIntoView() 方法
DOM元素的scrollIntoView() 方法让当前的元素滚动到浏览器窗口的可视区域内，通过触发滚动容器的定位实现。
DOM元素的scrollIntoView()方法 是原生JS 兼容到IE6，兼容性非常好。
参数如下
{
behavior: "auto" | "instant" | "smooth", // 默认 auto
block: "start" | "center" | "end" | "nearest", // 默认 center
inline: "start" | "center" | "end" | "nearest", // 默认 nearest
}
解释一下这三个参数：
- behavior 表示滚动方式。auto 表示使用当前元素的 scroll-behavior 样式。instant 和 smooth 表示 直接滚到底 和 使用平滑滚动。
- block 表示块级元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb 来说，就是竖直方向。start 表示将视口的顶部和元素顶部对齐；center 表示将视口的中间和元素的中间对齐；end 表示将视口的底部和元素底部对齐；nearest 表示就近对齐。
- inline 表示行内元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb 来说，就是水平方向。其值与 block 类似。
用法：
html:
<div class="wrap"> <div onClick="onScrollIntoView()">点击让黑色块到顶部</div> <ul class="body"> <li>1</li> <li>2</li> <li id="box">我是黑色</li> <li>3</li> <li>4</li> </ul> </div>
js:
function onScrollIntoView () {
var element = document.getElementById("box");
element.scrollIntoView({behavior: "smooth"});
}
效果：
这回大家再也不用害怕做锚点定位啦。
最后我们在说一个关于页面滚动问题吧，那就是 返回顶部 功能实现
返回顶部 功能实现
我们常用定时器 setInterval 来不断减去高度。
如：当前距离顶部 1000， 我们每10毫秒减50，
var timer = setInterval(function() { // 定时器 每10毫秒执行一次
// 顶部距离 document.body.scrollTop = 1000
var speed = 50 // 返回顶部速度
document.body.scrollTop = document.body.scrollTop - speed
if (document.body.scrollTop === 0) { // 返回到达顶部后， 销毁定时器
clearInterval(timer)
}
}, 10)
效果：
大家会发现，页面返回是滚动起来很干。 没10毫秒减50. 很平均，在交互上效果并不好。
借鉴上面 scroll-behavior:smooth 的交互效果。 缓动的返回顶部。
改一下计算方式：1000/2 = 500, 500/2 =250, 250/2 = ...... 这样滑动起来是不是就平滑了呢？
换算成公式：开始位置 = 开始位置 + (结束位置 - 开始位置) / 速度
document.body.scrollTop = 1000 + (0 - 1000) / 2
公式太烦了还是上代码吧：
var onTop = function (a, b, c, d) {
if (a == b || typeof a != 'number') {
return
}
b = b || 0
c = c || 2
var speed = function () {
a = a + (b - b) / c
if (a < 1) {
d(b, true)
return
}
d(a, false)
requestAnimationFrame(speed)
}
speed()
}
- a 开始位置
- b 结束位置
- c 速度
- d 位置回调，d(当前的位置值, 否动画结束)
调用：
var target = document.body.scrollTop ? document.body : document.documentElement
onTop(target.scrollTop, 0, 4, function (value) {
target.scrollTop = value
})
效果：
Ps: gif录制效果不好，大家可以动手写一下DEMO
相关推荐
- 全局和隐式 using 指令详解（全局命令）
-
1.什么是全局和隐式using？在.NET6及更高版本中，Microsoft引入了...
- 请停止微服务，做好单体的模块化才是王道:Spring Modulith介绍
-
1、介绍模块化单体是一种架构风格，代码是根据模块的概念构成的。对于许多组织而言，模块化单体可能是一个很好的选择。它有助于保持一定程度的独立性，这有助于我们在需要的时候轻松过渡到微服务架构。Spri...
- ASP.NET程序集引用之痛:版本冲突、依赖地狱等解析与实战
-
我是一位多年后端经验的工程师，其中前几年用ASP.NET...
- .NET AOT 详解（.net 6 aot）
-
简介AOT（Ahead-Of-TimeCompilation）是一种将代码直接编译为机器码的技术，与传统的...
- 一款基于Yii2开发的免费商城系统（一款基于yii2开发的免费商城系统是什么）
-
哈喽,我是老鱼，一名致力于在技术道路上的终身学习者、实践者、分享者！...
- asar归档解包（游戏arc文件解包）
-
要学习Electron逆向，首先要有一个Electron开发的程序的发布的包，这里就以其官方的electron-quick-start作为例子来进行一下逆向的过程。...
- 在PyCharm 中免费集成Amazon CodeWhisperer
-
CodeWhisperer是Amazon发布的一款免费的AI编程辅助小工具，可在你的集成开发环境（IDE）中生成实时单行或全函数代码建议，帮助你快速构建软件。简单来说，AmazonCodeWhi...
- 2014年最优秀JavaScript编辑器大盘点
-
1.WebstormWebStorm是一种轻量级的、功能强大的IDE，为Node.js复杂的客户端开发和服务器端开发提供完美的解决方案。WebStorm的智能代码编辑器支持JavaScript,...
- 基于springboot、tio、oauth2.0前端vuede 超轻量级聊天软件分享
-
项目简介：基于JS的超轻量级聊天软件。前端：vue、iview、electron实现的PC桌面版聊天程序，主要适用于私有云项目内部聊天，企业内部管理通讯等功能，主要通讯协议websocket。支持...
- JetBrains Toolbox推出全新产品订阅授权模式
-
捷克知名软件开发公司JetBrains最为人所熟知的产品是Java编程语言开发撰写时所用的集成开发环境IntelliJIDEA，相信很多开发者都有所了解。而近期自2015年11月2日起，JetBr...
- idea最新激活jetbrains-agent.jar包，亲测有效
-
这里分享一个2019.3.3版本的jetbrains-agent.jar，亲测有效，在网上找了很多都不能使用，终于找到一个可以使用的了，这里分享一下具体激活步骤，此方法适用于Jebrains家所有产品...
- CountDownTimer的理解（countdowntomars）
-
CountDownTimer是android开发常用的计时类，按照注释中的说明使用方法如下：kotlin:object:CountDownTimer(30000,1000){...
- 反射为什么性能会很慢?（反射时为什么会越来越长）
-
1.背景前段时间维护一个5、6年前的项目，项目总是在某些功能使用上不尽人意，性能上总是差一些，仔细过了一下代码发现使用了不少封装好的工具类，工具类里面用了好多的反射，反射会影响到执行效率吗？盲猜了一...
- btrace 开源!基于 Systrace 高性能 Trace 工具
-
介绍btrace（又名RheaTrace）是抖音基础技术团队自研的一款高性能AndroidTrace工具，它基于Systrace实现，并针对Systrace不足之处加以改进，核心改进...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- .NET 奇葩问题调试经历之3——使用了grpc通讯类库后，内存一直增长......
- 全局和隐式 using 指令详解（全局命令）
- 请停止微服务，做好单体的模块化才是王道:Spring Modulith介绍
- ASP.NET程序集引用之痛:版本冲突、依赖地狱等解析与实战
- .NET AOT 详解（.net 6 aot）
- 一款基于Yii2开发的免费商城系统（一款基于yii2开发的免费商城系统是什么）
- asar归档解包（游戏arc文件解包）
- 在PyCharm 中免费集成Amazon CodeWhisperer
- 2014年最优秀JavaScript编辑器大盘点
- 基于springboot、tio、oauth2.0前端vuede 超轻量级聊天软件分享
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)