CSS篇-让页面平滑滚动 css3实现平滑滑动
yuyutoo 2024-10-12 00:22 4 浏览 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
相关推荐
- 野路子科技!2步教你把手机改造成一个FTP服务器，支持PC互传
-
哈喽，大家好，我是野路子科技，今天来给大家带来一个教程，希望大家喜欢。正如标题所言，就是教大家如何把售价改造成FTP服务器，而这个时候估计有朋友会问了，把手机改造成FTP服务器有什么用呢？现在有Q...
- 不得不看:别样于Server-U的群晖文件存储服务器的搭建与使用
-
我先前的作品中，有着关于Server-U的ftp文件存储服务器的搭建与访问的头条文章和西瓜视频，而且我们通过各种方式也给各位粉丝介绍了如何突破局域网实现真正意义上的公网访问机制技术。关于Server-...
- Qt三种方式实现FTP上传功能_qt引入qftp库
-
FTP协议FTP的中文名称是“文件传输协议”，是FileTransferProtocol三个英文单词的缩写。FTP协议是TCP/IP协议组中的协议之一，其传输效率非常高，在网络上传输大的文件时，经...
- Filezilla文件服务器搭建及客户端的使用
-
FileZilla是一个免费开源的FTP软件，分为客户端版本和服务器版本，具备所有的FTP软件功能。可控性、有条理的界面和管理多站点的简化方式使得Filezilla客户端版成为一个方便高效的FTP客户...
- 美能达柯美/震旦复印机FTP扫描怎么设置?
-
好多网友不知道怎么安装美能达/震旦复印机扫描，用得最多是SMB和FTP扫描，相对于SMB来说，FTP扫描安装步骤更为便捷，不容易出问题，不需要设置文件夹共享，所以小编推荐FTP来扫描以美能达机器为例详...
- CCD(简易FTP服务器软件)_简单ftp服务器软件
-
CCD简易FTP服务器软件是一款很方便的FPT搭建工具，可以将我们的电脑快速变成一个FPT服务器。使用方法非常简单，只要运行软件就会自动生效，下载银行有该资源。该工具是不提供操作界面的，其他用户可以输...
- Ubuntu系统搭建FTP服务器教程_ubuntu架设服务器
-
在Ubuntu系统上搭建FTP服务器是文件传输的一个非常实用方法，适合需要进行大量文件交换的场景。以下是一步步指导，帮助您在Ubuntu上成功搭建FTP服务器。1.安装vsftpd软件...
- 理光FTP扫描设置教程_理光ftp扫描设置方法
-
此教程主要用来解决WIN10系统下不能使用SMB文件夹扫描的问题，由于旧的SMB协议存在安全漏洞，所以微软在新的系统，WIN8/WIN10/SERVER201220162018里使用了新的SMB传...
- 纯小白如何利用wireshark学习网络技术
-
写在前面工欲善其事必先利其器！熟悉掌握一种神器对以后的工作必然是有帮助的，下面我将从简单的描述Wireshark的使用和自己思考去写，若有错误或不足还请批评指正。...
- 京东买13盘位32GB内存NAS:NAS系统安装设置教程
-
本内容来源于@什么值得买APP，观点仅代表作者本人｜作者：yasden你没有看错，我在京东自营商城购买硬件，组装了一台13盘位，32GB内存的NAS，硬盘有13个盘位！CPU是AMD的5500！本文...
- python教程之FTP相关操作_python ftps
-
ftplib类库常用相关操作importftplibftp=ftplib.FTP()ftp.set_debuglevel(2)#打开调试级别2，显示详细信息ftp.connect(“I...
- xftp怎么用，xftp怎么用，具体使用方法
-
Xftp是一款界面化的ftp传输工具，用起来方便简单，这里为大家分享下Xftp怎么使用？希望能帮到有需要的朋友。IIS7服务器管理工具可以批量管理、定时上传下载、同步操作、数据备份、到期提醒、自动更新...
- 树莓派文件上传和下载，详细步骤设置FTP服务器
-
在本指南中，详细记录了如何在树莓Pi上设置FTP。设置FTP可以在网络上轻松地将文件传输到Pi上。FTP是文件传输协议的缩写，只是一种通过网络在两个设备之间传输文件的方法。还有一种额外的方法，你可以用...
- win10电脑操作系统，怎么设置FTP?windows10系统设置FTP操作方法
-
打印，打印，扫描的日常操作是每一个办公工作人员的必需专业技能，要应用FTP作用扫描文件到电脑上，最先要必须一台可以接受文件的FTP服务器。许多软件都需要收费标准进行，但人们还可以应用Windows的系...
欢迎 你 发表评论:
- 一周热门
- 最近发表
- 标签列表
-
- 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)