scrollIntoView 与平滑滚动
经常有这样的需求:点击一个链接(内链)跳转到当前页面中间某个部分。对于这样的需求,很容易想到使用锚点实现。但有一个问题:滚动一步到位,太生硬了。
我还是比较喜欢平滑滚动。HTML5 中提供了 CSS 属性 scroll-behavior
并且修改了一系列滚动函数的可接受参数用于支持平滑滚动特性。
scroll-behavior
这个 CSS 属性就只接受两个自定义值:auto
和 smooth
。默认值为 auto
,表示立刻滚到底;smooth
即表示平滑滚动。这个属性会影响滚动函数 scrollTo
、scrollIntoView
等的默认滚动行为,也会影响 scrollTop
、scrollLeft
等 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
}
对象可以有三个参数。
behavior
表示滚动方式。auto
表示使用当前元素的scroll-behavior
样式。instant
和smooth
表示直接滚到底
和使用平滑滚动
。block
表示块级元素排列方向要滚动到的位置。对于默认的writing-mode: horizontal-tb
来说,就是竖直方向。start
表示将视口的顶部和元素顶部对齐;center
表示将视口的中间和元素的中间对齐;end
表示将视口的底部和元素底部对齐;nearest
表示就近对齐。inline
表示行内元素排列方向要滚动到的位置。对于默认的writing-mode: horizontal-tb
来说,就是水平方向。其值与block
类似。
示例
//锚点连接
$('.menuItem').on('click',function(){
var idName = '#menu' + $(this).prev().data('menuid')
if(document.querySelector(idName)){
document.querySelector(idName).scrollIntoView({
behavior: "smooth", // 默认 auto
block: "center", // 默认 center
inline: "nearest", // 默认 nearest
});
}
})
https://codepen.io/CarterLi/p...点击预览
可惜的是,目前浏览器支持度欠佳。而 scroll-behavior
作为一个 CSS 属性,不能被 polyfill
。scrollIntoView
作为一个 JavaScript 函数对 polyfill
很友好。在目前的情况下,推荐使用 scrollIntoView
加 polyfill 的方式
最新文章
- mysql的explain学习
- NIO框架Mina学习
- GUI开发者桌面搜索文件工具
- F2063 Could not compile used unit &#39;tt.pas&#39;
- 【Howie玩docker】-命令行只显示-bash-4.1#
- HDU 4740 模拟题意
- python爬取网页内容demo
- AxWindowsMediaPlayer控件的使用
- Python3版本中的filter函数,map函数和reduce函数
- Windows 下 Redis 服务无法启动,错误 1067 进程意外终止解决方案
- PHP CURL POST提交
- 5-4 import,export属性
- iOS - 使用苹果自带的UIVideoEditController进行视频编辑
- 关闭生产订单时报错“订单&;的未处理将来更改记录组织删除标记/完成”,消息号CO688
- HDU 4725 The Shortest Path in Nya Graph(最短路建边)题解
- ubuntu安装ntp时间服务器
- ubuntu16.04让内核编译一次过的方法
- 01_Nginx入门
- 离线安装ocp3.11需要注意的事情
- iOS下原生与JS交互(总结)
热门文章
- 【转】django rest framework ModelSerializer 、serializers小结
- crontab定时调度shell脚本
- leetcode-mid-dynamic programming-322. Coin Change - NO
- 【C++进阶:结构体作为叶节点初始化】
- OpenStack Rally 质量评估与自动化测试利器
- Java连接Hive使用Zookeeper的方式
- 理解ES6中的Iterator
- centos7:Kafka集群安装
- cocos2dx基础篇(21) 进度条CCProgressTimer
- Scratch少儿编程系列:(四)脚本选项卡说明