不要着急，不要着急，

休息，休息一会。

滚动指示器

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
 
posted @ 2019-07-25 19:52  angle-xiu  阅读(134)  评论(0)  编辑  收藏  举报
Live2D