滚动指示器

现在很多博客都会有这样一种效果，当滚动条上下移动时，顶部或者底部会有进度条一样的效果，以显示当前滚动的位置，这样的效果就叫做滚动指示器。代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
    .bar{
      position: fixed;
      top: 0;
      height: 10px;
      background-color: #55a;
    }
    .content{
        height: 2000px;
    }
  </style>
</head>
<body>
  <div class="bar"></div>
  <div class="content"></div>

  <script type="text/javascript">
    var body = document.body,
        html = document.documentElement,
        bar = document.querySelector('.bar');

    //初始化滚动指示器宽度
    bar.style.width = body.scrollTop || html.scrollTop / (body.clientHeight - html.clientHeight) * body.clientWidth + 'px';
    window.onscroll = function(){
      var scrollTop = body.scrollTop || html.scrollTop;//获取scrollTop，因为FireFox下需要用document.documentElement.scrollTop来获取
      bar.style.width = scrollTop / (body.clientHeight - html.clientHeight) * body.clientWidth + 'px';
    }

  </script>
</body>
</html>

原理很简单，通过scrollTop / (body的内容区域高度 - 可视区域的高度)的比，来得出当前滚动条相对于内容区域的位置，再跟内容区域相乘就可以了。

推荐这篇文章，用css来实现的。无奈css功底不够，只能用js来实现了。

posted @ 2017-04-18 21:16  _Jo  阅读(167)  评论(0)  编辑  收藏  举报