<!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. uni-app生命周期小测

    标签: js uni-app 前情 uni-app是我很喜欢的跨平台框架,它能开发小程序,H5,APP(安卓/iOS),对前端开发很友好,自带的IDE让开发体验也很棒,公司项目就是主推uni-app. ...

  2. 12C++循环结构-for循环（2）——教学

    一.循环变量为字符型 (第32课 26个兄弟姐妹)参考视频1 试编一程序,按字典顺序输出26个字母. 流程图: 思考:先顺序输出26个小写英文字母,再逆序输出26个大写英文字母. 循环可以是递增型循环 ...

  3. Python Tkinter 弹窗美化指南

    在Python编程中,Tkinter是标准GUI(图形用户界面)库,它允许开发者创建桌面应用程序.尽管Tkinter提供了基本的窗口和控件功能,但默认的样式和外观往往显得单调.因此,对Tkinter弹 ...

  4. Rapid SCADA v6安装常见问题

    用了很多年的Rapid SCADA v5,现在官网已经推出了v6,就简单写一下有关v6的安装指南吧. 本指南面向Windows用户,不适用于linux用户 步骤 从官网下载Rapid SCADA最新的 ...

  5. 开启Word、Excel、PPT时速度很慢的一种解决方法

      本文介绍基于修改加载项,解决Microsoft Office系列软件开启速度较慢的办法.   最近,发现Excel软件的打开速度越来越慢,会在一定程度上影响工作效率.因此尝试对此加以解决.其中,本 ...

  6. Linux下修改文件所属用户和组

    chgrp  用户名    文件名  -R chown 用户名   文件名  -R -R表示递归目录下所有文件 以上部分已验证 一.修改文件所属组群--chgrp    修改文件所属组群很简单-chg ...

  7. Qt音视频开发09-ffmpeg内核音视频同步

    一.前言 用ffmpeg来做音视频同步,个人认为这个是ffmpeg基础处理中最难的一个,无数人就卡在这里,怎么也不准,本人也是尝试过网上各种demo,基本上都是渣渣,要么仅仅支持极其少量的视频文件比如 ...

  8. Qt编写地图综合应用23-标注点交互

    一.前言 地图项目应用中,标注点的交互使用频率非常高,这应该是最常用的场景,比如从数据库中读取出来设备的信息包括经纬度坐标,然后需要在地图上显示对应的设备,这就需要用addMarker函数来动态添加标 ...

  9. MySql中的driverClassName、url

    在Java桌面开发或者Java Web开发(基于SSM框架)配置MySQL数据源时,driverClassName属性如果填错了,会导致了这一系列错误.归结其原因就是 mysql-connector- ...

  10. Redis 源码简洁剖析 14 - Redis 持久化

    Redis 持久化方式 RDB 优势 劣势 AOF 优势 劣势 Redis < 7.0 参考链接 Redis 源码简洁剖析系列 Redis 持久化方式 主要参考 Redis 官方文档:Redis ...