纯CSS实现Scroll Indicator(滚动指示器)

特别声明:小站已开通年费VIP通道,年费价格为 ¥365.00元。如果您喜欢小站的内容,可以点击开通会员进行全站阅读。如果您对付费阅读有任何建议或想法,欢迎发送邮件至: airenliao@gmail.com!(^_^)

Scroll Indicator称之为滚动指示器,是Web中常见的一种效果。用户滚动垂直滚动内容时,页面顶部有一个类似进度条的效果,当内容滚动到页面最低端,进度条效果填满整个进度条。感觉描述得有点绕,还是录制一个动效图,用图来说明这种效果,毕竟一图胜过千言万语:

Scroll Indicator

以前实现这种效果都需要借助于JavaScript,或者说是采用jQuery的插件。网上有关于这方面的介绍的文章也很多,比如:

但今天咱们要说的是使用纯CSS制作Scroll Indicator效果。说到这里,大家或许会问,这样的效果用CSS实现,吹了吧。其实使用纯CSS实现一点也没有问题。如果你感兴趣,欢迎接着往下阅读。

Scroll Indicator几个关键点

先来看JavaScript的做法:

Scroll Indicator

看代码变化就清楚,通过JavaScript改变容器scroll-linewidth值。也就是在滚动内容的时候,width值从0%变化到100%。其中最重要的是要知道滚动条位置的计算。在整个计算中,要知道两个重要的参数:

  • document height:文档的高度$(document).height()
  • window height: 视窗高度$(window).height()

如下图所示:

剩余80%内容付费后可查看

如需转载,烦请注明出处:https://www.w3cplus.com/css/pure-css-create-scroll-indicator.html

如果文章中有不对之处,烦请各位大神拍正。如果你觉得这篇文章对你有所帮助,打个赏,让我有更大的动力去创作。(^_^)。看完了?还不过瘾?点击向作者提问!

赏杯咖啡,鼓励他创作更多优质内容!
返回顶部