1.css实现：
<html> <head> <meta charset="utf-8"> <style> body { position: relative; width: 110%; /* 避免进度条缺失，具体可通过调节宽度解决 */ } .scroll-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; } .scroll-indicator::after { content: ''; position: fixed; top: 5px; bottom: 0; right: 0; left: 0; background: #fff; z-index: 1; } </style> </head> <body> <div class="scroll-indicator"></div> <p>撑字数</p> <p>撑字数</p> <p>撑字数</p> <p>撑字数</p> <p>撑字数</p> 。。。(自己继续往下加内容) </body> </html> 2.js实现(jQuery,原生需要考虑浏览器的兼容问题，。。主要还是太懒。) 附关键代码： var dh = $(document).height();//文档高度 var vh = $(window).height();视高 var sH = dh - vh; $(window).scroll(function() { var perc = $(window).scrollTop() / sH);//占比 $('.scroll-indicator').css({width: perc * 100 + '%'}); )}; 详细可参考张鑫旭大佬的博客：https://www.zhangxinxu.com/wordpress/2019/06/better-css-scroll-indicator/?tdsourcetag=s_pcqq_aiomsg转载于:https://www.cnblogs.com/angle-xiu/p/11246549.html
相关资源：viewpager特效滑动指示器