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标签包裹,每一 ...
随机推荐
- python 生成小学计算练习 docx
python3 生成二年级下计算练习,有口算,有竖式. import random import osfrom docx.shared import Pt from docx import Docum ...
- COSBrowser文件链接导出——爆赞的本地化管理功能
前言 用过COSBrowser的小伙伴们应该都知道,COSBrowser的文件分享功能非常好用.但是,文件分享功能又有所局限,就是它只能分享单个文件,而文件夹分享,更有其因为部分必要因素,如安全性 ...
- OpenTelemetry.NET API
OpenTelemetry.NET API Status and Releases Tracing Metrics Logging 1.0 Alpha Beta 安装 dotnet add packa ...
- 大咖论道｜金融AI下一阶段的发展思考
回顾过去十年,人工智能(AI)技术的发展速度让人惊叹,金融行业是现今AI应用最具潜力和最为活跃的领域之一.通过多年渗透,AI不间断从技术驱动迈向场景驱动,已广泛与金融业务深度融合,衍生出众多新业态.新 ...
- 虚拟机安装 Win10 ，无法启动，报错EFI Network ... Time out
问题情况 VMWare 16 安装 win10 的镜像文件,无法启动,报错 EFI Network ... Time out 解决办法 虚拟机设置中 固件类型 改用 BIOS 已解决
- Qt音视频开发27-ffmpeg视频旋转显示
一.前言 用手机或者平板拍摄的视频文件,很可能是旋转的,比如分辨率是1280x720,确是垂直的,相当于分辨率变成了720x1280,如果不做旋转处理的话,那脑袋必须歪着看才行,这样看起来太难受,所以 ...
- [转]Automatic Image Stitching with Accord.NET
原文链接:Automatic Image Stitching with Accord.NET
- ERROR: SSL peer shut down incorrectly错误解决(Android Studio)
错误信息:ERROR: SSL peer shut down incorrectly错误解决(Android Studio) 错误原因:android studio在下载"gradle-4. ...
- docker导入和导出
save和export 镜像导入和导出有2种方式,分别为 save和load.export和import save导出的是镜像:export导出的为容器 save导出会保存镜像所有的提交记录:expo ...
- 特殊数据类型的深度分析：JSON、数组和 HSTORE 的实用价值
title: 特殊数据类型的深度分析:JSON.数组和 HSTORE 的实用价值 date: 2025/1/4 updated: 2025/1/4 author: cmdragon excerpt: ...