CSS滚动指示器

一、CSS滚动指示器

滚动指示器指的是页面的顶端会有一个进度条,指示滚动的进度。效果如下GIF所示(点击播放):

滚动计数器示意效果

CSS滚动指示器指的是不借助JavaScript,纯CSS实现滚动进度效果。

二、传统的实现方法

传统CSS实现方法由一个名叫 Mike的人首先提出,时间应该是16年,这个CodePen目前已经有十几万的访问量:CSS only scroll indicator

传统的CSS实现非常有创意,具体原理如下。

在body标签上写一个对角的线性渐变,然后用一个白色的固定定位的浮层覆盖在上面,CSS代码示意如下:

body{    
    background: linear-gradient(to right top, teal 50%, white 50%);
    background-size: 100% calc(100% - 100vh);
    background-repeat: no-repeat;
}

body::before{
    content:'';
    position: fixed;
    top: 5px;
    bottom: 0;
    width: 100%;
    z-index: -1;
    background: white;
}

::before伪元素模拟的就是白色的覆盖层,不过这个覆盖层并不是完全覆盖,上边缘露出了一点点的距离,这个距离可以透出body渐变背景,随着滚动进行,会出现类似进度条一样的效果。如果我们把白色覆盖层的透明度降低,大家就可以看懂实现的原理了,如下GIF录屏效果(点击播放,1M大小):

ä¼ ç»ŸæŒ‡ç¤ºå™¨åŽŸç†ç¤ºæ„å›¾

三、传统实现方法的致命缺陷

传统的css滚动指示器效果虽然方法和思路非常精妙,但是却有致命的缺陷,导致几乎无法在实际项目中应用。

致命缺陷是:

  1. 页面内容不能有背景色或背景图!
  2. body自身也不能有背景图!

由于存在上面这两点性质,实际开发场景变幻莫测,页面内容有个背景色背景图什么的太正常不过了,居然会影响CSS滚动指示器的效果,显然这个技术没有实用性,就是个开阔眼界的玩具而已。

好在技术在发展,时代在召唤,我自己花时间琢磨了一下,有没有什么方法可以化腐朽为神奇,避开上面这些不足,让CSS滚动只是器能够在实际项目中大放光彩。嘿,还真让我想到了,一番实践下来确实可行,这里给大家分享下。

四、我想到的更好的实现

我想到的这个技术实现区别就在于对角线性渐变不是写在body标签上的,而是一个普通的div元素上。

具体操作如下:

  1. 在标签内插入指示器元素:

    <div class="indicator"></div>
    
  2. 粘贴如下所示的CSS代码:

    body {
        position: relative;
    }
    .indicator {
        position: absolute;
        top: 0; right: 0; left: 0; bottom: 0;
        background: linear-gradient(to right top, teal 50%, transparent 50%) no-repeat;
        background-size: 100% calc(100% - 100vh);
        z-index: 1;
        pointer-events: none;
        mix-blend-mode: darken;
    }
    .indicator::after {
        content: '';
        position: fixed;
        top: 5px; bottom: 0; right: 0; left: 0;
        background: #fff;
        z-index: 1;
    }
    

一个更好的CSS滚动指示器效果就实现了,眼见为实,您可以狠狠地点击这里:更好的纯CSS滚动指示器demo

GIF录屏效果如下(观察最上边缘):

我的更好的CSS滚动指示器

我的更好的CSS滚动指示器

原理说明

传统CSS滚动指示器为了防止对角渐变(也就是滚动进度条)的覆盖页面上的元素内容,因此写在了最底层的body元素上,这就导致如果body元素内的普通元素内容有背景色,或者背景图之类的,就会覆盖进度条,产生致命缺陷。

我的优化方法是把对角渐变(也就是滚动进度条)连同里面的白色覆盖层写在了普通元素的上面,这样避开被覆盖的致命缺陷。但是这样实现带来另外一个问题,页面的内容都被白色图层覆盖了,那页面内容岂不是都看不见了?不要担心,有CSS声明可以让白色的图层变成透明,那就是mix-blend-mode:darken,也就是darken混合模式。darken混合模式的混合方式很好理解,两个颜色进行混合,哪个颜色深就使用哪个颜色?

要知道所有的颜色里面最浅的就是白色,于是我们只要把我们的白色覆盖层的混合模式设置为darken,那必然最终呈现出来的颜色一定是覆盖层下面元素内容的颜色,换句话说我们的白色透明覆盖层变透明了。

原理示意图

五、其他说明和结语

CSS滚动指示器要想效果良好,需要注意两点:

  1. 进度条的颜色尽量取深色,因为本身包含darken混合模式,如果颜色过浅,很容易被底部的内容颜色给混合。

  2. CSS滚动指示器需要在页面滚动高度超过一屏的时候才出现。原因有两方面:一是如果滚动高度过小,没有必要使用滚动指示器;二是滚动指示器本质上是一个渐变,如果滚动高度不足,则进度条的边缘会过于倾斜而导致显示效果不完美。

    过于倾斜的效果示意

热门文章

暂无图片
编程学习 ·

mysql查询练习1篇

mysql查询练习1篇 学生表 学号 姓名 性别 出生日期 所在班级 create table student( sno varchar(20) primary key, sname varchar(20) not null, ssex varchar(10) not null, sbirthday datetime, class varchar(20) ) ENGINE=innoDB DEFAULT CHARACTER SET=utf8 ;教师表 教…
暂无图片
编程学习 ·

如何用Nearby Service开发针对附近人群的精准广告推送功能

当你想找一家餐厅吃饭,却不知道去哪家,这时候手机跳出一条通知,为你自动推送附近优质餐厅的信息,你会点击查看吗?当你还在店内纠结于是否买下一双球鞋时,手机应用给了你发放了老顾客5折优惠券,这样的广告你有拒绝的理由吗?这样的广告不仅不会引起用户的厌烦,还满足了用…
暂无图片
编程学习 ·

Android视频的操作

上节课我们着重介绍了Android中的音频的处理,通过学习,我们已经熟悉并掌握了多媒体开发的几个操作,大致可以分为:a播放和采集编解码处理算法处理,实现特殊功能标准协议以及播放器工具类的开发 本节课我们来看一下Android的视频的相关操作。Android提供了常见的视频的编码、…
暂无图片
编程学习 ·

活动目录的备份和恢复

活动目录的备份和恢复AD的备份和恢复AD回收站说明启用回收站功能演示AD回收站AD活动目录的备份和还原AD活动目录的备份安装Windows Server Backup工具添加角色和功能开始之前-安装类型-服务器选择-服务器角色,默认下一步功能确认结果开始备份AD活动目录AD活动目录的恢复重启按…
暂无图片
编程学习 ·

Plotly+Cufflinks,交互式图表神器,一行代码GET!

前言本文将介绍如何使用Plotly+Cufflinks更简便地制作出更好的图表。 这是Github上一个大神发布的资料,本人学习之后觉得非常实用,所以和大家分享。需要查看代码的童鞋指路Github:https://github.com/WillKoehrsen/Data-Analysis 本文中的所有代码都是使用Jupyter notebook完…
暂无图片
编程学习 ·

IM即时通讯哇呼--解析

哇呼“Chat”是一款包含android客户端/ios客户端/pc客户端/WEB客户端的即时通讯系统。是由闪电云自主研发,服务器端源码直接部署在客户主机。非任何第三方IM通讯平台! 为各行业门户网站和企事业单位提供“一站式”定制解决方案,打造一个稳定,安全,高效,可扩展的即时通信系…
暂无图片
编程学习 ·

Netty

Netty是什么?异步事件驱动的网络应用框架,可以快速开发一个可维护的高性能的服务端和客户端。都是谁在用Netty?Dubbo、zk、RocketMQ、es、Spring5(对于Http协议的实现)、Spak等大型开源项目使用Netty作为底层通讯的实现。Netty中的核心概念是什么?1、Channel管道,是对Sock…
暂无图片
编程学习 ·

制药业中的自然语言处理(NLP)

文章目录NLP 用于发现新药物化合物NLP 用于将参与者纳入临床试验药品营销的 NLP参考资料 转载来源:https://zhuanlan.zhihu.com/p/140044281自然语言处理(NLP)在制药业的使用似乎少于机器视觉和预测分析等 AI 方法,但尽管如此,NLP 在制药业仍有一些应用。该行业主要处理结…
暂无图片
编程学习 ·

动态任务

1.任务句柄 /* LED任务句柄 */ static TaskHandle_t LED_Task_Handle; 2.任务创建函数 BaseType_t xTaskCreate( TaskFunction_t pxTaskCode, //任务函数const char * const pcName, //任务名称const uint16_t usStackDepth, //堆栈大小void * const pvParamet…
暂无图片
编程学习 ·

Fiddler(二)数据信息分析

抓包是Fiddler的最基本的应用,以本博客为例,启动Fiddler之后,在浏览器中输入http://blog.csdn.net/ohmygirl 键入回车之后,在Fiddler的web session界面捕获到的HTTP请求如下图所示:#号列中的图标,每种图标代表不同的相应类型,具体的类型包括:另外,注意请求的host字段。…
暂无图片
编程学习 ·

使用MicroPython计算任意位数圆周率

计算任意精度的圆周率是个有趣的主题,得益于python的强大计算能力,我们在MicroPython中也可以轻松的计算pi的数值。先输入下面的代码:""" 文件:pi.py 说明:用MicroPython计算任意精度圆周率计算 作者:未知 版本: 时间: 修改:邵子扬2016.5v1.1 http://b…
暂无图片
编程学习 ·

每日一题 -- LeetCode (八)

JavaScript / TypeScript for LeetCode 当前进程:开始时间:2020.6.27 结束时间:undefinedGitHub仓库:https://github.com/Cundefined/JavaScript-or-TypeScript-for-LeetCode 参考视频:https://www.bilibili.com/video/BV1wA411b7qZ 1、题目要求 ( LeetCode-第53题 ) 最大…
暂无图片
编程学习 ·

LeetCode–最长公共前缀

LeetCode–最长公共前缀 博客说明文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!说明 leetcode题,14题 最长公共前缀 题目 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀,返回空字符…
暂无图片
编程学习 ·

解决 java “错误:编码GBK 的不可映射字符”

今天一个学弟遇到这样的问题,如下图所示。 看到这样的问题,我的思考是: 1.首先是使用javac -version查看环境变量是否正确 2.然后查看编译路径是否存在中文 3.查看代码本身是否有中英文符号混淆 4.右击dos窗口,查看其属性中的编码集是否是utf-8 代码本身没问题,可以在exli…
暂无图片
编程学习 ·

Java语言基础之封装&构造方法&静态的使用

面向对象思想概述 概述:面向对象是相对于面向过程而言的,面向过程强调的是功能,面向对象强调的是将功能封装进对象,强调具备功能的对象。 思想特点:面向对象思维方式是一种更符合人们思考习惯的思想 面向过程思维方式中更多的体现的是执行者(自己做事情),面向对象中更多…
暂无图片
编程学习 ·

vue.js 生命周期(五)

每个vue 实例在被创建时都要经过一系列的初始化过程,例如设置数据监听,编译模板,将实例挂载到DOM并在数据变换时自动更新DOM邓。同时在这过程中会运行一些叫生命周期钩子的函数。 这些函数在vue 实例中 以 属性 : 函数的形式定义。 常用函数: //在实例初始化之后,数据观测…
暂无图片
编程学习 ·

http相关

http相关下载文件 下载文件 //处理中文文件名乱码if (request.getHeader("User-Agent").toUpperCase().contains("MSIE") ||request.getHeader("User-Agent").toUpperCase().contains("TRIDENT")|| request.getHeader("User-Agen…
暂无图片
编程学习 ·

【Flink】Object Reuse 模式(Stream API)

1. 概述昨天在界面上看到一句话,主管让加上去,于是我去查查这个参数有什么用 官网:https://ci.apache.org/projects/flink/flink-docs-stable/dev/execution_configuration.html enableObjectReuse() / disableObjectReuse() By default, objects are not reused in Flink. …
暂无图片
编程学习 ·

美团数据库高可用架构的演进与设想

本文介绍最近几年美团MySQL数据库高可用架构的演进过程,以及我们在开源技术基础上做的一些创新。同时,也和业界其它方案进行综合对比,了解业界在高可用方面的进展,和未来我们的一些规划和展望。在2015年之前,美团(点评侧)长期使用MMM(Master-Master replication manage…
暂无图片
编程学习 ·

查询语句执行顺序

select 查询列表 7 from 表1 别名 1 连接类型 join 表2 2 on 连接条件 3 where 筛选 4 group by 分组列表 5 having 筛选 6 order by排序列表 8 limit 起始条目索引,条目数; 9