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
Javascript 显示当前滚动条滚动的百分比的更多相关文章
- 关于如何使用javascript监听滚动条滚动事件
在网页中,通常有一个通往网页顶部的锚点,现在我们就来实现它 Html代码: <a id="scrollup" href="#top" style=&quo ...
- javascript通过改变滚动条滚动来显示某些元素的scrollIntoView()方法
scrollIntoView(b)可以在任何HTML上调用,通过滚动滚动条,调用的元素就可以出现在可视区域. 参数如果是true,或者不传参数,则表示调用元素的顶部与浏览器顶部平齐. 如果传入fals ...
- js网页滚动条滚动事件实例分析
本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...
- jQuery 滚动条 滚动到底部（下拉到底部） 加载数据(触发事件、处理逻辑)、分页加载数据
1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...
- JavaScript js无间断滚动效果 scrollLeft方法 使用模板
JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...
- jQuery粘性跟随滚动条滚动的导航栏源代码下载
jQuery粘性跟随滚动条滚动的导航栏源代码下载 作者:网页模板 大小:0.005MB 点击次数:3494 发布时间:2014-03-07 12:55 分享到:0 特效介绍 jQuery粘性跟随滚动条 ...
- 随滚动条滚动的居中div
<!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...
- Android实现 ScrollView + ListView无滚动条滚动
Android实现 ScrollView+ListView无滚动条滚动,即ListView的数据会全部显示完,但Listview无滚动条. 核心代码如下: 1. NoScrollListView.ja ...
- iframe滚动条问题：显示/隐藏滚动条
iframe 问题2008-01-22 16:37****** 显示 iframe 内容 XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLI ...
- 在Table的Tbody中实现滚动条滚动
功能描述: 在一个Table中实现表头固定不动,内容部分实现通过滚动条滚动. 实现效果: 当页面宽度变宽时,只有最后一列的宽度会改变. 逻辑实现: 1.将表头和内容分别使用两个table标签包裹,每一 ...
随机推荐
- Teable 团队 Sealos 最佳实践，创业公司的完美选择
大家好,我是开源多维表格项目 Teable 的创始人陈加贝. 作为飞书多维表格的最早期负责人,我参与并见证了这个产品从 0 到 1 的全过程.这段经历也让我深入理解了企业在数据协作方面的真实需求. 以 ...
- 基于 .NET 的 Nuget 发版工具
背景 由于 Natasha 及周边项目发版任务多,文件结构也不简单,之前一直使用基于 Github 管道脚本和 XUnit 来发版.这个方案对于发版环境与条件依赖性较强,且不够灵活,因此萌生出做一个本 ...
- NATS: Aspire.NATS.Net 库
NuGet Aspire.NATS.Net 快速入门 首先,你需要已经配置了 NATS 服务器,并且知道访问这个服务器的 URL 地址. 安装 NuGet 使用你熟悉的方式安装 NuGet 库 dot ...
- 【前端】【JavaScript】通过成绩判断等级
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 【C#】【平时练习】将左边列表框(List)的内容（月份）添加到右边列表框。最终右侧显示的内容（月份）要保持一定顺序
Aspx - 点击查看代码 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind=" ...
- K8S deployment 重启的三种方法
一般重启deployment,常规操作是删掉对应的pod, 但如果有多个副本集的话,一个个删很麻烦.除了删除pod,还可以: 方案一: 加上环境变量kubectl patch deploy <d ...
- Nginx日志重定向到标准输出
背景静态站点使用`docker`部署时,希望`nginx前台启动`的同时可以将错误日志和访问日志全部重定向到标准输出,便于采集和处理! 实现只需要修改`nginx.conf`中`3行`关于日志的配置就 ...
- 记一次 .NET某电商医药网站 CPU爆高分析
一:背景 1. 讲故事 准备明年把.NET高级调试的训练营的课程进行重构,采用案例引导式,而CPU爆高类有不少是程序员在写代码的时候不注意时间复杂度,在数据量稍微大一点的情况直接幻化成了死循环,时间复 ...
- 2022 年数据科学研究综述：重点介绍 ML、DL、NLP 等
2022 年数据科学研究综述:重点介绍 ML.DL.NLP 等 当我们在 2022 年底临近时,我对许多著名研究小组完成的所有惊人工作感到振奋,他们将 AI.机器学习.深度学习和 NLP 的状态扩展到 ...
- Chrome谷歌浏览器自动升级后页面字体过小
谷歌浏览器使用一段时间后系统自动升级后页面字体突然变小,如何进行设置呢,如下 1.在页面右上角选择浏览器设置-外观-自定义字体-设置字号等其他需要配置的参数即可