viewport.js是一款非常有用的js插件，它可以通过设置导航视图来精确的对页面中每个章节的内容进行导航。同时你在滚动页面的时候还可以看到当前阅读的章节处于什么状态。viewport.js可以用于检测当前的滚动状态。

安装

可以通过bower来安装该插件。

$ bower install vanilla-viewport

使用方法

使用该插件首先要引入viewport.js文件。

<script type="text/javascript" src="/js/viewport.js"></script>
HTML结构

为每一个章节添加class section：

<div id="firstSection" class="section">
    First section content goes here...
</div>

<div id="secondSection" class="section">
    Second section content goes here...
</div>
初始化插件

在完成上面的代码之后，可以使用下面的代码来将一个导航视图和文章章节关联起来。

// use document.body if the whole page is scrollable
var myViewport = document.getElementById('myViewport');
var firstSection = document.getElementById('firstSection');

myViewport.addEventListener(
    'scroll',
    function() {
        var location = firstSection.viewportTopLocation;
        console.log(
            'The viewport is at ' + location +
            ' relatively to the first section'
        );
    },
    false
);

Section元素有以下一些属性：

  • viewportTopLoctaion：一个视图滚动条进度。如果section在viewport中可见，它的值在0（section开始处）和1（section结束处）之间。值小于0或大于1表示section在屏幕之外。
  • veiwportTopStart：section相对于viewport顶边的精确位置。值的意义和viewportTopLocation相同。
  • viewportTopEnd：与veiwportTopStart相同，只是到底边的位置。

如果你想显示滚动进程为单一值使用viewportTopLocation。如果你想显示一个滚动位置范围则要使用viewportTopStart和viewportTopEnd属性。

下面是水平滚动Section元素属性：

  • viewportLeftLocation：section相对于viewport的水平滚动位置。
  • viewportLeftStart：viewport左边部的位置。
  • viewportLeftEnd：viewport右边部的位置。

下面的属性用于在viewport中滚动动一个指定的目标section位置。

  • viewportScrollTopTarget
  • viewportScrollLeftTarget

你可以使用它们来在点击某个导航视图按钮的时候滚动到指定的section位置。

如果viewport不是全屏的，需要在元素上添加一个viewport class。

<div class="viewport" id="myViewport">
  <div id="firstSection" class="section">
      First section content goes here...
  </div>

  <div id="secondSection" class="section">
      Second section content goes here...
  </div>
</div>

viewport元素还包含一个currentSection属性，该属性用于指定当前在viewport中可见的section元素。

var currentSection = document.getElementById('myViewport').currentSection;

如果你在页面加载完成之后想动态的添加section内容，可以调用viewport.reset()方法来更新插件。

处于性能原因，section的尺寸大小在页面加载时被缓存，并且假定只有在页面尺寸改变时才会改变。如果由于别的原因使section的尺寸发生了改变，可以调用viewport.updateDimensions()方法来进行更新。

更多关于该插件的信息请参考：https://github.com/asvd/viewport