DeathGhost

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

这篇文章发布于 2019年05月20日 23:26 星期一 阅读 470 次,评论 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   '%';
  };
}

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

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

孙志锋

视觉前端爱好者

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


孙志锋more,08年毕业于外事EC专业,从事5年服装B2C运营管理于杭;现,西安从事IT领域前端设计开发工作。
4

目录

32

文章

7

评论

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

💕与君共勉💕