html 滚动条_页面顶部滚动条效果

最新推荐文章于 2023-08-25 17:34:57 发布

weixin_39796878

最新推荐文章于 2023-08-25 17:34:57 发布

阅读量482

点赞数

文章标签： html 滚动条 html滚动条 onscroll事件滚动距离判断vsflexgrid是否有滚动条

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>顶部滚动条</title>
<style>
*{padding: 0;margin: 0;}
body{height:1000px;}
.barTop{height: 4px;width: 0%;position: fixed;top: 0;left: 0;right: 0;}
</style>
</head>
<body>
<script>
class TopBarScroll{
vH = document.body.scrollHeight; //页面整个页面高度
cH = document.documentElement.clientHeight; //窗口可视高度
constructor(color){
this.color = color || '#3498db';
}
el = null;
createDiv(){
this.el = document.createElement('div');
this.el.className="barTop"
this.el.style.backgroundColor = this.color;
document.body.appendChild(this.el);
}
init(){
let fag = this.hasScrollbar();
if(fag){
this.createDiv();
window.onscroll = this.scroll.bind(this);
}
}
scroll(){ //window 滚动事件
let sH = this.getScrollTop();
let s = this.getPercent(sH,(this.vH - this.cH))
this.el.style.width = s;
}
getScrollTop(){ //滚动条距上距离
var scrollTop=0;
if(document.documentElement&&document.documentElement.scrollTop)
{
scrollTop=document.documentElement.scrollTop;
}
else if(document.body)
{
scrollTop=document.body.scrollTop;
}
return scrollTop;
}
getPercent(num, total){ //获取百分比
num = parseFloat(num);
total = parseFloat(total);
if (isNaN(num) || isNaN(total)) {
return "-";
}
return total <= 0 ? "0%" : (Math.round(num / total * 10000) / 100.00)+"%";
}
hasScrollbar() { //判断是否有滚动条，如果没有就不生成DIV元素
return document.body.scrollHeight > (window.innerHeight || document.documentElement.clientHeight);
}
}
window.onload = function(){
let b = new TopBarScroll("#9b59b6");
b.init();
}
</script>
</body>
</html>

weixin_39796878

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
html 滚动条_页面顶部滚动条效果

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>顶部滚动条</title> <s...
复制链接

扫一扫