CSS Scroll Indicator —— 纯CSS 滚动指示器

时间 2019-11-16

标签 css scroll indicator 滚动指示器栏目 CSS 繁體版

原文原文链接

前段时间拜读阮老师的《ECMAScript 6 入门》，看到官网上每一个章节的页面都有一个相似进度条的东西，出于好奇，上网查了一下，发现这个东西叫Scroll Indicator.javascript

Scroll Indicator：滚动指示器。通俗来讲，就是当前可视区域距离页面顶部的占比，效果以下：css

JavaScript的作法

在尚未捞源码以前，本身先大体想了一下实现思路：java

页面加载完成以后，获取到页面文档高度（DH）、当前可视区域高度（VH）、可视区域距离页面顶部的高度scrollTop（TH）；
(DH - VH)就是须要滚动的值；
监听页面 scroll 事件，(TH / (DH - VH)) * 100%，即是当前的占比；
固然，须要考虑节流、 防抖。

核心代码以下：es6

var dh = $(document).height();
var vh = $(window).height();
var sHeight = dh - vh;
$(window).scroll(function() {  
    var perc = $(window).scrollTop() / (dh - vh);
    $('.j-scroll-indicator').css({width: perc * 100 + '%'});
)};复制代码

这是实现以后的效果：bash

DEMOwordpress

而后去捞了一下阮老师es6官网的源码：spa

(function() {
      var $w = $(window);
      var $prog2 = $('.progress-indicator-2');
      var wh = $w.height();
      var h = $('body').height();
      var sHeight = h - wh;
      $w.on('scroll', function() {
        window.requestAnimationFrame(function(){
          var perc = Math.max(0, Math.min(1, $w.scrollTop() / sHeight));
          updateProgress(perc);
        });
      });

      function updateProgress(perc) {
        $prog2.css({width: perc * 100 + '%'});
        ditto.save_progress && store.set('page-progress', perc);
      }

    }());复制代码

不出所料，作法是同样的。3d

而后，就开始瞎琢磨，以前用 css 搞过瀑布流，那能够用 css 搞滚动指示器吗？code

CSS的作法

使用 CSS来实现滚动指示器，难点在于：如何实时去获取当前可视区域在文档流中的位置。cdn

上述问题，如何去考虑呢？咱们从分解滚动指示器的动做中来找答案：

黑色表色进度条
红色表示文档高度
绿、蓝、橙表示视窗滚动

也就是说：(TH / (DH - VH))公式中的 TH 能够不用知道，只须要DH - VH 的高度，即直角三角形的高度便OK。

如今问题转化为：如何求出VH，这时候该 vh 这个长度单位登场了，vh 是基于视窗单位的排版计量。vh能够获取当前视窗的高度。嗯，如今看来，应该是能够一写了。

DEMO

<body>
    <div class="main">
        <h1>滚动鼠标</h1>
    </div>
</body>复制代码

.main {
   margin: 0;
   padding: 0;
   display: block;
   height: 30000px;
   text-align: center;
   line-height: 100px;
}

body {
   margin: 0;
   padding: 0;
   background: linear-gradient(to right top, #369 50%, #fff 50%);
   background-size: 100% calc(100% - 99vh);
}

body:before {
   content: '';
   position: fixed;
   top: 4px;
   bottom: 0;
   width: 100%;
   z-index: -1;
   background: #fff;
}复制代码

大体实现是没有问题的，可是有下面几个缺点：

文档内容太少（高度过小）的话，进度条呈箭头形，不美观（可考虑加毛玻璃效果来弱化）
background-size: 100% calc(100% - 99vh); 中的99vh是相对值，如果视窗高度比较小，进度条会填不满进度条槽（可考虑加min-height来弱化）

以上