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)


相关推荐

  • pycharm每次运行需选择interpreter_pycharm怎么配置python环境变量

    pycharm每次运行需选择interpreter_pycharm怎么配置python环境变量在运行时就出现了下图情况,也不知道咋回事,之前删了些以为没用的文件夹,估计是删错了,环境没了。关闭后上面窗口后打开Settings→projectInterpreter选项你里面可能有多个,可以删掉重新添加一个有可能会遇到目录不为空的情况,因为你之前可能创建过这个文件路径啥的复制下面的路径,进去删掉原来的路径里的文件夹。然后再点击ok,重新创建一个…

  • 软件著作权申请流程_如何申请软件著作权

    软件著作权申请流程_如何申请软件著作权现在越来越多的安卓市场需要软著才能注册或者是才能上线,申请软著势在必行。最简单的方式,简单的准备资料,找第三方代理,不过这样可能花费数百毛爷爷,如果是急需加急,可能是几千。现在简单说一下自己申请的流程:首先贴出中国版权保护中心网站中国版权保护中心:http://apply.ccopyright.com.cn/cpcc/column_list_bqdj.jsp请使用IE浏览器打开一.注册

  • java变量设置_如何正确的配置JAVA环境变量

    java变量设置_如何正确的配置JAVA环境变量原创:YiKiA2Data什么是环境变量?环境变量是在操作系统中一个具有特定名字的对象,它包含了一个或者多个应用程序所将使用到的信息。为什么要配置环境变量?为了方便在控制台编译和运行java程序,不必进入到java的程序目录里面去运行。这样你放在任何目录下的java程序文件都可以编译运行,而不是必须把这个程序文件放在java.exe和javac.exe所在的目录下。什么是JAVA_HOME…

  • 我做游戏开发这八年[通俗易懂]

    我做游戏开发这八年简述与编程擦肩而过从图像设计到痴迷编程入门编程沉迷编程Java的图形编程就职游戏开发2011,第一次面试&实习生第一个游戏2012年,第二个重量级IP游戏2013年,转战手游与创业2014-2015,第一次创业2015,西山居和多益网络2016-2018,第二次创业2018至今,360游戏艺术(岂凡网络)技术总监简述这篇文章并不是想教会大家如何开发游戏,更不能教大家如…

  • mysql blob数据类型_MySQL中三种锁的特点

    mysql blob数据类型_MySQL中三种锁的特点先说明一下Blob的类型,直接从网上摘抄了!!!1、MySQL有四种BLOB类型:  ·tinyblob:仅255个字符  ·blob:最大限制到65K字节  ·mediumblob:限制到16M字节  ·longblob:可达4GB2、除了类型对后面存取文件大小有限制,还要修改mysql的配置文件。  Windows、linux基本一样通过修改文件my.ini或my.cnf文件,在…

    2022年10月23日
  • jenkins自定义构建参数_查看git仓库列表

    jenkins自定义构建参数_查看git仓库列表前言当我们的自动化项目越来越多的时候,在代码仓库会提交不同的分支来管理,在用jenkins来构建的时候,我们希望能通过参数化构建git仓库的分支。下载安装GitParameter插件系统管理-

发表回复

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

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