<!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. VTK 显示3D模型的网格线(线框/wireframe)

    在VTK9.1.0在Windows10+VS2019+Qt 5.15.2环境下编译安装的Qt例子中,想显示球体表面的网格线(线框/wireframe),设置actor的EdgeVisibilityOn ...

  2. Pwn2own 2022 Tesla 利用链 （ConnMan 堆越界写 RCE）

    Pwn2own 2022 Tesla 利用链 (ConnMan 堆越界写 RCE) Opening the doors and windows 0-click RCE on the Tesla Mod ...

  3. 程序员出海做 AI 工具：如何用 similarweb 找到最佳流量渠道？

    如题,今天给大家带来实操的一个小教程.这里先抛出个问题:"做海外流量增长,如何为产品制定营销渠道?" 分享一个方法只需要 3 步,方法如下: 找到和你产品最接近的细分 Top 竞争 ...

  4. MySQL启动时自动创建数据库

    一.背景及分析 MysqL容器启动时,会自动创建一些必要的数据库,比如MysqL,这是官方默认的做法.但是,在实际中,还需要让MysqL自动创建我们自定义的数据库.本文就此应用场合进行探究. 一般的做 ...

  5. Mybatis-plus 简单使用

    Mybatis-plus 特点介绍: 1.无侵入:只做增强不做改变,引入它不会对现有工程产生影响 2.强大的CRUD操作:内置通用Mapper.Service,仅仅通过少量配置即可实现单表大部分CRU ...

  6. [转]OpenCV三角测量重建triangulatePoints原理解析

    opencv源代码注释 附上opencv三角测量函数的主要代码和注释 cvTriangulatePoints(CvMat* projMatr1, CvMat* projMatr2, CvMat* pr ...

  7. [转]vue项目中app.vue 、main.js和 index.html的关系

    参考链接: 1.vue项目中app.vue .main.js和 index.html的关联 2.Vue中index.html.main.js.App.vue,之间关系 3.关于Vue中main.js, ...

  8. 微信团队分享：详解iOS版微信视频号直播中因帧率异常导致的功耗问题

    本文由微信客户端团队rhythm分享,原题"视频号直播:如何进一步降低功耗占用?",本文有修订和改动. 1.引言 功耗优化一直是 app 性能优化中让人头疼的问题,尤其是在直播这种 ...

  9. VUE3基础环境搭建

    VUE3基础环境搭建 1. 安装vue.js npm install vue -g 安装webpack Webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bun ...

  10. [LC623]在二叉树中增加一行

    题目描述 给定一个二叉树的根 root 和两个整数 val 和 depth ,在给定的深度 depth 处添加一个值为 val 的节点行. 注意,根节点 root 位于深度 1 . 加法规则如下: 给 ...