<!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. COS数据工作流+云函数最佳实践 - 文件哈希值计算

    01 文件哈希值是什么? 文件哈希值,即文件内容的HASH值.是通过对文件内容进行加密运算得到的一组二进制值,主要用途是用于文件校验或签名.正是因为这样的特点,它常常用来判断两个文件是否相同. COS ...

  2. 关于 Envoy on Windows

    Window Image in hub.cocker.com envoy 的镜像位于 https://hub.docker.com/u/envoyproxy 之下,其中 Windows 包括如下 4 ...

  3. 在 MySQL 创造类似 PipelineDB 的流视图(continuous view)

    公司的系统采用的是 Google Cloud SQL 提供的 MySQL 数据库,由于历史原因,数据库成本极高,需要对它进行优化缩减成本. 相比 PostgresSQL,MySQL 主要缺少以下特性, ...

  4. 【Go进阶】手写 Go websocket 库（一）｜WebSocket 通信协议

    前言 这里是白泽,我将利用一个系列,为你分享如何基于 websocket 协议的 rfc 文档,编写一个库的过程.并从0开始写一遍 gorilla/websocket 这个库,从中你可以学习到 web ...

  5. 【C#】【Cookie】Cookie设置与读取

    依赖 using System.Web; 设置Cookie 1.新建Cookie对象 HttpCookie cookie = new HttpCookie("UserInfo"); ...

  6. 【Mybatis】学习笔记02：实现简单的查

    Mybatis02:简单的查 如果你没先去学 增删改 ,然后直接看这篇记录,我想会有些困难.因为该文写的很粗劣,只是简单的截图.所以没基础的建议先去看 [Mybatis]学习笔记01:连接数据库,实现 ...

  7. How Liquibase Finds Files: Liquibase Search Path

    https://docs.liquibase.com/concepts/changelogs/how-liquibase-finds-files.html For example, if your r ...

  8. Java多线程处理文件详解与代码示例

    在Java编程中,文件处理是一项常见的任务.当需要处理大量文件或处理文件的时间较长时,单线程的处理方式可能会显得效率低下.为了提高文件处理的效率,我们可以使用多线程技术.本文将详细介绍如何使用Java ...

  9. Qt/C++音视频开发50-不同ffmpeg版本之间的差异处理

    一.前言 ffmpeg的版本众多,从2010年开始计算的项目的话,基本上还在使用的有ffmpeg2/3/4/5/6,最近几年版本彪的比较厉害,直接4/5/6,大版本之间接口有一些变化,特别是一些废弃接 ...

  10. Qt编写安防视频监控系统56-数据库分页

    一.前言 在视频监控系统中也需要对日志记录进行查询显示,有时候查询到的记录并不能一页显示完,最好的做成翻页显示,如果所有记录都在一页显示通过滚动条查看,不是很符合用户习惯,比如搜索引擎的记录也都是分页 ...