DeathGhost

JavaScript通过onscroll实现页面顶部进度条效果

这篇文章发布于 2019年05月20日 23:26 星期一 阅读 578 次,评论 0 条

DeathGhost 编辑,归类于javascript »

当我们获取页面内容高度、窗口可视高度及其可滚动高度值时,当页面的滚动条滚动时,我们可以通过该事件实现页面滚动进度条效果。

无意中浏览网页看到在鼠标向下滑动页面时,页面顶部以进度条的方式展示效果,在这里记录下自己玩玩。

使用场景:页面头部(header)绝对定位(absolutefixed)或粘性定位(sticky)悬浮或固定的情况下,通过CSS渲染其展示效果,一定程度改善用户体验效果。

实现方法:首先获取三个值:页面总高度可视高度及其可滚动高度,通过onscroll事件执行样式即可。

JavaScript页面滚动进度条
JavaScript页面滚动进度条效果

获取相关参数值:

let pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
let scrollAvail = pageHeight - windowHeight;

在顶部区域需要展示的地方定义标签样式。e.g .

在所要展示的地方定义标签,绑定CSS,设置高度一定值,默认宽度为0即可

下面是PUG,SCSS写法演示

div.scrollBar
.scrollBar{
  position: absolute;
  left:0;
  bottom:0;
  background-color:rgba($color: #0084ff, $alpha: .25);
  width:0;
  height:2px;
}

然后我们在JavaScript中执行方法即可

标签元素宽度在滚动事件触发时 = (滚动条高度/可滚动高度)*100   '%';
function scrollBar() {
  let pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
  let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
  let scrollAvail = pageHeight - windowHeight;
  window.onscroll = function () {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      document.querySelector('.scrollBar').style.width = (scrollTop/scrollAvail)*100   '%';
  };
}

另外,浏览器窗口变更时,我们可以通过onresize属性resize事件去再次执行它,以免溢出。

window.onresize = () => scrollBar();

最终完整的如下:

scrollBar();
window.onresize = () => scrollBar();
function scrollBar() {
  let pageHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
  let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
  let scrollAvail = pageHeight - windowHeight;
  window.onscroll = function () {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      document.querySelector('.scrollBar').style.width = (scrollTop/scrollAvail)*100   '%';
  };
}
在任何媒介以任何形式复制、发行本作品。惟须遵守下列条件:
署名 — 您必须给出适当的署名,提供指向本许可协议的链接,同时标明是否(对原始作品)作了修改。您可以用任何合理的方式来署名,但是不得以任何方式暗示许可人为您或您的使用背书。
非商业性使用 — 您不得将本作品用于商业目的。
禁止演绎 — 如果您 再混合、转换、或者基于该作品创作,您不可以分发修改作品。

©️ DeathGhost 署名-非商业性使用-禁止演绎(CC BY-NC-ND)

用户评论(当前评论共计0条)

⚠️ 评论内容需要审核方可显示。
DeathGhost

孙志锋

视觉前端爱好者

志于道,据于德,依于仁,游于艺。

4

目录

33

文章

14

评论

世界品牌·洛川红富士

🙏 到访,就是一种鼓励,谢谢你的到访!🙏

💕与君共勉💕