Javascript 显示当前滚动条滚动的百分比

 <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奇奇怪怪的滚动条显示</title>
</head>
<style>
#progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background-color: #0A74DA;
}
 
#content{
  width:80px; 
  height: 100px; 
  /* 为了滚动条能出来 */
  overflow: auto;
}
</style>
 
<script type="text/javascript">
 
document.getElementById("content").addEventListener("scroll", function(e){
  console.log(e.target.scrollTop) // 这玩意是滚动距离
  console.log("percent",(e.target.scrollTop * 1.0 / (e.target.scrollHeight - e.target.offsetHeight))) // 百分比
  document.getElementById("progress").style.width= (e.target.scrollTop * 100.0 / (e.target.scrollHeight - e.target.offsetHeight))+"%"
})
 
</script>
 
<body>
  <!-- 显示百分比进度 -->
  <div id="progress"></div>
  <!-- 滚动内容 -->
  <div id="content">
    zhe shi yi duan wen zi, shi wei le tian chong div yong de, qi guai 200px zhe me chang de ma? you dian chang de guo fen le 
  </div>
</body>
</html>

Result

Reference

想法来源：https://es6.ruanyifeng.com/#docs/array
在线编辑HTML：https://c.runoob.com/front-end/61/
文档查找：https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scroll_event

__EOF__

本文作者：echo_lovely
本文链接：https://www.cnblogs.com/echo-lovely/p/17226469.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！

posted @ 2023-03-17 13:40 echo_lovely 阅读(334) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· css的度量单位：px、em、rem、vh、vw、vmin、vmax、百分比

· QT5笔记： 15. 其他显示组件的常用功能

· [javascript]如何优雅的实现网页自动滚动

· JavaScript 不同浏览器的滚动条

· 原生js隐藏和显示滚动条

公告

Javascript 显示当前滚动条滚动的百分比

发表于 2023-03-17 13:40阅读：334评论：0推荐：0

Html&Css JavaScript Html&Css JavaScript

关注

跳至底部

昵称： echo_lovely
园龄： 5年5个月
粉丝： 39
关注： 12

+加关注

随笔分类

随笔档案

文章分类

C#(1)

echo

Javascript 显示当前滚动条滚动的百分比

Result

Reference

公告

echo_lovely

Javascript 显示当前滚动条滚动的百分比

搜索

常用链接

最新随笔

我的标签

合集

随笔分类

随笔档案

文章分类

相册

阅读排行榜

评论排行榜

推荐排行榜

最新评论

	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>奇奇怪怪的滚动条显示</title>
	</head>
	<style>
	#progress {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	background-color: #0A74DA;
	}

	#content{
	width:80px;
	height: 100px;
	/* 为了滚动条能出来 */
	overflow: auto;
	}
	</style>

	<script type="text/javascript">

	document.getElementById("content").addEventListener("scroll", function(e){
	console.log(e.target.scrollTop) // 这玩意是滚动距离
	console.log("percent",(e.target.scrollTop * 1.0 / (e.target.scrollHeight - e.target.offsetHeight))) // 百分比
	document.getElementById("progress").style.width= (e.target.scrollTop * 100.0 / (e.target.scrollHeight - e.target.offsetHeight))+"%"
	})

	</script>

	<body>
	<!-- 显示百分比进度 -->
	<div id="progress"></div>
	<!-- 滚动内容 -->
	<div id="content">
	zhe shi yi duan wen zi, shi wei le tian chong div yong de, qi guai 200px zhe me chang de ma? you dian chang de guo fen le
	</div>
	</body>
	</html>