<!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

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

Javascript 显示当前滚动条滚动的百分比的更多相关文章

  1. 关于如何使用javascript监听滚动条滚动事件

    在网页中,通常有一个通往网页顶部的锚点,现在我们就来实现它 Html代码: <a id="scrollup" href="#top" style=&quo ...

  2. javascript通过改变滚动条滚动来显示某些元素的scrollIntoView()方法

    scrollIntoView(b)可以在任何HTML上调用,通过滚动滚动条,调用的元素就可以出现在可视区域. 参数如果是true,或者不传参数,则表示调用元素的顶部与浏览器顶部平齐. 如果传入fals ...

  3. js网页滚动条滚动事件实例分析

    本文实例讲述了js网页滚动条滚动事件用法.分享给大家供大家参考.具体分析如下: 在做js返回顶部的效果时,要监听网页滚动条滚动事件,这个事件就是:window.onscroll.当onscroll事件 ...

  4. jQuery 滚动条 滚动到底部（下拉到底部） 加载数据(触发事件、处理逻辑)、分页加载数据

    1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...

  5. JavaScript js无间断滚动效果 scrollLeft方法 使用模板

    JavaScript js无间断滚动效果 scrollLeft方法 使用模板 <!DOCTYPE HTML><html><head><meta charset ...

  6. jQuery粘性跟随滚动条滚动的导航栏源代码下载

    jQuery粘性跟随滚动条滚动的导航栏源代码下载 作者:网页模板 大小:0.005MB 点击次数:3494 发布时间:2014-03-07 12:55 分享到:0 特效介绍 jQuery粘性跟随滚动条 ...

  7. 随滚动条滚动的居中div

    <!-- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  8. Android实现 ScrollView + ListView无滚动条滚动

    Android实现 ScrollView+ListView无滚动条滚动,即ListView的数据会全部显示完,但Listview无滚动条. 核心代码如下: 1. NoScrollListView.ja ...

  9. iframe滚动条问题：显示/隐藏滚动条

    iframe 问题2008-01-22 16:37******   显示 iframe 内容 XHTML 1.0 Transitional 标准不能显示 <!DOCTYPE html PUBLI ...

  10. 在Table的Tbody中实现滚动条滚动

    功能描述: 在一个Table中实现表头固定不动,内容部分实现通过滚动条滚动. 实现效果: 当页面宽度变宽时,只有最后一列的宽度会改变. 逻辑实现: 1.将表头和内容分别使用两个table标签包裹,每一 ...

随机推荐

  1. Swagger 调试，我不想再复制粘贴token啦~

    作为后端开发,进行Web Api 调试,除了使用 Postman, Apifox 等 Web Api 调试工具之外,我想使用Swagger进行调试应该是更方便,更常用的方式了吧. 那么在需要 toke ...

  2. 2024-12-14：K 周期字符串需要的最少操作次数。用go语言，给定一个长度为n的字符串 word 和一个整数k，k是n的因数。每次操作可以选择两个下标i和j，使得i和j都可以被k整除，然后用从j

    2024-12-14:K 周期字符串需要的最少操作次数.用go语言,给定一个长度为n的字符串 word 和一个整数k,k是n的因数.每次操作可以选择两个下标i和j,使得i和j都可以被k整除,然后用从j ...

  3. vscode实现Markdown实时预览

    vscode - 插件搜索: Markdown Preview Enhanced 安装 然后打开vscode预览框,即可. That's ALL

  4. 云消息队列备份 | CKafka、TDMQ 消息队列数据备份到 COS

    前言 随着业务规模的不断扩大,企业越来越重视构建高性能.高可用的大型分布式系统.为了解决应用耦合,合理进行流量削锋,腾讯云提供了包括 CKafka 和 TDMQ 在内的一系列消息队列中间件.为了更方便 ...

  5. 解决Vim粘贴格式乱问题

    在vim粘贴代码的时候,粘贴的代码(shift+insert)会自动缩进,导致格式非常混乱. 本人深受其害,查阅网上大牛,发现以下方式均可行,与大家分享. 下面介绍两种方法: (1)在vim中,进入命 ...

  6. Linux系统部署FineReport

    1. 概述 1.1 应用场景 帆软提供 Linux 操作系统下可直接安装使用的 FineReport 设计器,满足不同系统的用户的操作需求. 支持中标麒麟.银河麒麟.UOS 的 Linux 操作系统 ...

  7. 中电金信：基于AI的智能化国内信用证结算系统

    ​ 2023年<商业银行资本管理办法>正式稿中,明确规定了国内信用证的信用转换系数:与贸易直接相关的短期或有项目,其信用转换系数为20%:而基于服务贸易的国内信用证,其系数为50%. 这一 ...

  8. Rocky Linux8升级9随记

    发现Rocky Linux已经升级了9.0版本,看着自己用着的8.5版本,跃跃欲试,于是就索性升级了.两者的支持年限没有太大的差别,先说我的想法:升不升级无所谓. 并不是9.0有什么特别牛的特性,只是 ...

  9. Qt音视频开发13-视频解码线程基类的设计

    一.前言 这个解码线程基类的设计,是到目前为止个人觉得自己设计的最好的基类之一,当然也不是一开始就知道这样设计,没有个三五年的摸爬滚打以及社会的毒打,是想不到要这样设计的,一方面是要不断提炼各种视频类 ...

  10. Qt通用方法及类库1

    函数名 //桌面宽度高度 static int deskWidth(); static int deskHeight(); //程序文件名称+当前所在路径 static QString appName ...