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

最新推荐文章于 2019-07-09 19:47:47 发布

weixin_33841503

最新推荐文章于 2019-07-09 19:47:47 发布

阅读量332

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/59bc84936fb9a00a652af5a4

版权

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

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

JavaScript的做法

在还没有捞源码之前，自己先大致想了一下实现思路：

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

核心代码如下：

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 + '%'});
)};复制代码

这是实现之后的效果：

DEMO

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

(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);
      }

    }());复制代码

不出所料，做法是一样的。

然后，就开始瞎琢磨，之前用 css 搞过瀑布流，那可以用 css 搞滚动指示器吗？

CSS的做法

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

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

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

也就是说：(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来弱化）

以上

weixin_33841503

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS Scroll Indicator —— 纯CSS 滚动指示器

前段时间拜读阮老师的《ECMAScript 6 入门》，看到官网上每个章节的页面都有一个类似进度条的东西，出于好奇，上网查了一下，发现这个东西叫Scroll Indicator.Scroll Indicator：滚动指示器。通俗来说，就是当前可视区域距离页面顶部的占比，效果如下：JavaScript的做法在还没有捞源码之前，自己先大致想了一下实现思路：页面加载完成之后，获取到页面文...
复制链接

扫一扫