本章目录

【浏览器操作 —— scrollProgressBar】

功能： 计算浏览器页面已阅读的内容占整个页面的百分比。一般搭配scroll的监听事件使用。

1-函数引入

js

  import { scrollProgressBar } from 'tj-jstools'

1

2-函数声明

ts

declare const scrollProgressBar: () => number;

1

3-使用示例

js

document.addEventListener('scroll',function(){

  console.log(scrollProgressBar()) // 1 ~ 100

})

1
2
3
4
5

它的返回值范围在0 ~ 100，代表 0% 到 100% ，只不过返回的是一个number类型的数值。如果你需要的一个字符串可以进行如下操作：

js

let progressStr = ''
document.addEventListener('scroll',function(){
  progressStr = scrollProgressBar() + '%';

  console.log(progressStr) // 0% ~ 100%

})

1
2
3
4
5
6
7