纯CSS实现Scroll Indicator(滚动指示器)
特别声明:如果您喜欢小站的内容,可以点击申请会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!或添加QQ:874472854(^_^)
Scroll Indicator称之为滚动指示器,是Web中常见的一种效果。用户滚动垂直滚动内容时,页面顶部有一个类似进度条的效果,当内容滚动到页面最低端,进度条效果填满整个进度条。感觉描述得有点绕,还是录制一个动效图,用图来说明这种效果,毕竟一图胜过千言万语:
以前实现这种效果都需要借助于JavaScript,或者说是采用jQuery的插件。网上有关于这方面的介绍的文章也很多,比如:
- @PANKAJ PARASHAR的《Reading Position Indicator》
- @Jonathan Cutrell的《How to Build a Page Scroll Progress Indicator With jQuery and SVG》
但今天咱们要说的是使用纯CSS制作Scroll Indicator效果。说到这里,大家或许会问,这样的效果用CSS实现,吹了吧。其实使用纯CSS实现一点也没有问题。如果你感兴趣,欢迎接着往下阅读。
Scroll Indicator几个关键点
先来看JavaScript的做法:
看代码变化就清楚,通过JavaScript改变容器scroll-line
的width
值。也就是在滚动内容的时候,width
值从0%
变化到100%
。其中最重要的是要知道滚动条位置的计算。在整个计算中,要知道两个重要的参数:
document height
:文档的高度$(document).height()
window height
: 视窗高度$(window).height()
如下图所示:
如需转载,烦请注明出处:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html
如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!