scrollIntoView动画效果

scrollIntoView动画效果经常有这样的需求:点击一个链接(内链)跳转到当前页面中间某个部分。对于这样的需求,很容易想到使用锚点实现。但有一个问题:滚动,太过生硬了,体验极差。我还是比较喜欢平滑滚动。HTML5中提供了CSS属性 scroll-behavior 并且修改了一系列滚动函数的可接受参数用于支持平滑滚动特性。scroll-behavior这个CSS属性就只接受两个自定义值:auto 和 smo…

大家好,又见面了,我是你们的朋友全栈君。

经常有这样的需求:点击一个链接(内链)跳转到当前页面中间某个部分。对于这样的需求,很容易想到使用锚点实现。但有一个问题:滚动,太过生硬了,体验极差。

我还是比较喜欢平滑滚动。HTML5 中提供了 CSS 属性 scroll-behavior 并且修改了一系列滚动函数的可接受参数用于支持平滑滚动特性。

scroll-behavior

这个 CSS 属性就只接受两个自定义值:auto 和 smooth。默认值为 auto,表示立刻滚到底;smooth 即表示平滑滚动。这个属性会影响滚动函数 scrollToscrollIntoView 等的默认滚动行为,也会影响 scrollTopscrollLeft 等 DOM 属性改变时的滚动行为。如果 scroll-behavior 被设置在根元素(<html>)上,表示应用在视口(viewport)上。这时对锚点、内链触发的视口滚动同样有效。

所以只需要给 html 元素设置样式 scroll-behavior: smooth 点击内链就会触发页面的平滑滚动,很简单。

scrollIntoView

上面说到:scroll-behavior 是指定滚动函数的默认行为,这其中就包括 scrollIntoView。顾名思义:这个函数就是把某个元素滚动到窗口的可见区域。

它接受两种形式的值:布尔值或对象。接受布尔值主要还是为了兼容不支持平滑滚动(老版)的浏览器。我们这里只说对象值。

{
  behavior: "auto" | "instant" | "smooth", // 默认 auto
  block: "start" | "center" | "end" | "nearest", // 默认 center
  inline: "start" | "center" | "end" | "nearest", // 默认 nearest
}

对象可以有三个参数。

  1. behavior 表示滚动方式。auto 表示使用当前元素的 scroll-behavior 样式。instant 和 smooth 表示 直接滚到底 和 使用平滑滚动
  2. block 表示块级元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb 来说,就是竖直方向。start 表示将视口的顶部和元素顶部对齐;center 表示将视口的中间和元素的中间对齐;end 表示将视口的底部和元素底部对齐;nearest 表示就近对齐。
  3. inline 表示行内元素排列方向要滚动到的位置。对于默认的 writing-mode: horizontal-tb 来说,就是水平方向。其值与 block 类似。

可惜的是,目前浏览器支持度欠佳。而 scroll-behavior 作为一个 CSS 属性,不能被 polyfillscrollIntoView 作为一个 JavaScript 函数对 polyfill 很友好。在目前的情况下,推荐使用 scrollIntoView 加 polyfill 的方式。

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/150112.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Java 动静分离_如何做前后端动静分离

    Java 动静分离_如何做前后端动静分离我们的ERP系统就是前后端完全分离,毫无关联。后端用的是改造的Laravel框架,将业务拆分、路由拆分,来分离后端复杂的权限验证,同时对外依旧是简单明确的RESTfulAPI。前端采用Vue.js+Bootstrap构建。补充说明题主在问这个问题之前,有必要对HTTP协议有一定的了解,这样你就不会在一些细枝末节无限纠结。因为本质上前后端的区别就在于一个是请求方、一个是响应…

  • bs架构与cs架构的区别详细讲解_cs架构和bs架构的区别举例子

    bs架构与cs架构的区别详细讲解_cs架构和bs架构的区别举例子链接:BS架构和CS架构的区别.本人觉得该博主解释的例子挺容易懂1、CS架构是Client/Service这两个单词的首字母,指的是客户端服务器架构的意思,很多常见的软件都是这种架构。解释:对于CS架构,最为常见的例子就是网络游戏,比如LOL、WOW如果不联网无法使用,你在软件内的所有操作通过互联网能够传递到其他的玩家身上。优点:第一,性能较高:可以将一部分的计算机工作放在客户端上,这样服务器只需要处理数据即可。第二,界面炫酷:客户端可以使用更多系统提供的效果,做出更为炫目的效果。缺点:第一,

  • 用python做学生信息管理系统_python管理系统实例

    用python做学生信息管理系统_python管理系统实例Python面向对象版学员管理系统文章目录Python面向对象版学员管理系统目标一.系统需求二.准备程序文件2.1分析2.2创建程序文件三.书写程序3.1student.py3.1.2程序代码3.2managerSystem.py3.2.1定义类3.2.2管理系统框架3.3main.py3.4定义系统功能函数3.4.1添加功能3.4.2删除学员3.4.3修改学员信息3.4.5查询学员信息3.4.6显示所有学员信息3.4.7保存学员信息3.4.8加载学员信息四.总结

  • word文档怎么打印成册子_零基础学word文档

    word文档怎么打印成册子_零基础学word文档Word2003是微软公司提供的一款文字处理软件,可以对文字进行排版和编辑、分段等各种处理,最终将编辑好的内容打印出来,是办公室一族中必备的办公软件之一。Word2003具有一个“书籍折页”的功能,能够在一页纸上打印两页的内容,打印后可以从中缝装订成折叠的小册子,更便于携带和阅读,具体怎么来设置呢?就让Word联盟为大家带来分享!动画演示:①打开“页面设置”对话框,切换到

  • java -jar 启动程序/设置classpath

    java -jar 启动程序/设置classpath前言在java-jar命令执行java程序时,制定classpath解决方案Java命令行提供了如何扩展bootStrap级别class的简单方法.-Xbootclasspath:完全取代基本核心的Javaclass搜索路径.不常用,否则要重新写所有Java核心class-Xbootclasspath/a:后缀。将classpath添加在核心cl…

  • Welcome to Xiao

    Welcome to Xiao这里写自定义目录标题WelcometoXiao新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML图表FLowchart流程图导出与导入导出导入WelcometoXiao你好!这是你第一次使用Markdown编辑器所展示的欢迎页。如果你想学习如何使用Mar

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号