如何通过控制台 给浏览器添加一个横向的滚动条放到上面 并显示滑动的百分比

可以在当前文章的网页下 F12打开控制台去试一试^ _ ^

1.效果图

2.为什么会玩这个

在平时我们会上在网上浏览一些网页
比如看小说 ,看一些技术类的教程像是菜鸟或是csdn,mdn等等
你会发现这些页面比较长不知道何时到头看起来有点不爽对吧
你是不是想直接看到你当前看到哪里的进度
当前滚动条 滚动了多少 还有多少要看

3.首次创作效果图

4怎么做的呢

4.1创建一个元素p标签

var a=document.createElement("p")

4.2把p设置样式 固定到左上角

a.style.position="fixed"
a.style.top="0"
a.style.left="0"
a.style.zIndex="99999999999"

4.3避免网页导航栏的遮盖

a.style.zIndex="99999999999"

4.4设置大小和颜色值

a.style.width="100%"
a.style.height="10px"
a.style.backgroundColor="red"

4.5插入到页面上

document.body.appendChild(a)

4.6js动态的设置 滚动条的长度 [3 行代码]

window.onscroll=function(en){
   
   var cur=document.documentElement.scrollTop/(document.documentElement.scrollHeight-