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;
}複製代碼

大體實現是沒有問題的，可是有下面幾個缺點：