简介

scroll trigger是一款 Angular 模块可以在滚动到某个点时触发动作。

使用

1.  引入文件

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.5/angular.js"></script>
<script src="https://rawgit.com/princemaple/scroll-trigger/v0.5.0/dist/scroll-trigger.min.js"></script>

2.  HTML

<div class="placeholder"></div>

CSS
<style>
    div {
      width: 200px;
      height: 1000px;
    }
    .placeholder {
      background-color: #000;
    }
    img {
      display: block;
      width: 200px;
      height: 200px;
    }
  </style>

3.  调用

<script>
    angular.module('demo', ['scroll-trigger'])
    .directive('lazyImg', function(ScrollTrigger) {
      return {
        restrict: 'A',
        scope: true,
        link: function(scope, elem) {
          scope.displayImage = function(randint) {
            elem[0].setAttribute('src', 'http://lorempixel.com/g/200/200?_=' + randint);
          };
        }
      };
    })
    .run(function() {
      for (var i = 0; i < 5; ++i) {
        var img = document.createElement('img')
        img.setAttribute('lazy-img', true);
        img.setAttribute('scroll-trigger', 'displayImage(' + Math.random() + ')');
        document.body.appendChild(img);
      }
    });
  </script>

相关链接

Gitee 地址 ：https://gitee.com/mirrors/scroll-trigger

.在线演示：https://plnkr.co/edit/JWFntSUoMewTj9hULfD1?p=preview&preview