超简单实现WEB页面顶部阅读进度条

导语

网页顶部的加载进度条非常常见,像Youtube和Github上都有见到。最近经常浏览一些文字类的网页,而在移动端的浏览器,右侧的滚动条有时会自动隐藏很不显眼,想随时知道大概还剩多少内容就比较麻烦。所以就想着在页面顶部增加一个进度条。

示例

请点击查看演示 👉 狂人日记

示例截图

实现

其实使用progress标签实现起来很简单,只需以下代码即可完成功能。

HTML

<progress id="content_progress" value="0"></progress>

CSS

#content_progress {
      /* Positioning */
      position: fixed;
      left: 0;
      top: 0;
      z-index: 1000;
      width: 100%;
      height: 2px;
      -webkit-appearance: none;
      -moz-appearance: none;
      appearance: none;
      border: none;
      background-color: transparent;
      color: #35a935;
}

#content_progress::-webkit-progress-bar {
      background-color: transparent;
}

#content_progress::-webkit-progress-value {
      background-color: #35a935;
}

#content_progress::-moz-progress-bar {
      background-color: #35a935;
}

JavaScript

document.addEventListener('DOMContentLoaded', function () {
      var winHeight = window.innerHeight,
            docHeight = document.documentElement.scrollHeight,
            progressBar = document.querySelector('#content_progress');
      progressBar.max = docHeight - winHeight;
      progressBar.value = window.scrollY;

      document.addEventListener('scroll', function () {
            progressBar.max = document.documentElement.scrollHeight - window.innerHeight;
            progressBar.value = window.scrollY;
      });
});

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏一“技”之长

iOS UITableViewCell使用详解

- (instancetype)initWithStyle:(UITableViewCellStyle)style reuseIdentifier:(NSStr...

8020
来自专栏ios 技术积累

iOS中的事件的产生和传递

●发生触摸事件后,系统会将该事件加入到一个由UIApplication管理的事件队列中,为什么是队列而不是栈?因为队列的特点是FIFO,即先进先出,先产生的事件...

13010
来自专栏LIN_ZONE

IOS系统下虚拟键盘遮挡文本框问题的解决

最近在项目中发现同样的代码在Android端微信网页中点击文本框唤出的虚拟键盘不会遮挡文本框,但是在IOS端的微信网页中点击文本框唤出的键盘却在大部分情况下会遮...

11830
来自专栏菩提树下的杨过

Flash/Flex学习笔记(26):AS3自定义右键菜单

直接上代码吧,关键地方都加上注释了: var cm:ContextMenu=new ContextMenu(); cm.hideBuiltInItems();/...

225100
来自专栏编程之旅

iOS开发——制作圆形头像

在iOS7之后,我们能发现许多应用都开始使用圆形来作为用户头像的形状,代表App就是腾讯QQ了,QQ的头像就是圆形的。

21320
来自专栏Objective-C

iOS-修改系统Tabbar背景色

30270
来自专栏技术博客

JavaScript 获取屏幕的高度和宽度

screen.availHeight:显示浏览器的屏幕的可用高度(这个可用高度不包括分配给半永久特性(如屏幕底部的任务栏)的垂直空间。)

9920
来自专栏一“技”之长

iOS中支持HTML文本的标签控件——MDHTMLLabel

        在iOS开发中对HTML的处理很多时候除了使用WebView外,还需要原生的控件对其进行渲染,例如将HTML字符串渲染为图文混排的View视图。...

15710
来自专栏pangguoming

AngularJS driective 封装 自动滚动插件

1.ui-smooth-scroll.js文件内容 angular.module('app') .directive('uiSmoothScroll',...

41780
来自专栏非典型技术宅

iOS动画系列之三:Core Animation1. 介绍2. 支持的平台3. Core Animation 的继承结构图4. 常见属性和使用步骤

12140

扫码关注云+社区

领取腾讯云代金券