angular 自定义 scroll事件

2019独角兽企业重金招聘Python工程师标准>>>

在众多事件中,angular 1.x对于scroll事件好像并不咋地,但是最近项目上要用到这玩意儿,

所以就自己写了一个,那么下面来说一下我的思路

先说一下功能的需求吧

一个div里面包了很多个div,外面的div是可以的滚动的,

而根据滚动到不同的区块时,每个内在的div要浮现出一块部分

然后说一下我的思路:

1.获取每一个悬浮模块的高度  -- divHeight

2.将所有高度累加成一个新的数组 -- heightArr

3.获取当前屏幕的滚动高度 -- scrollHeight

4.比较divHeight处于heightArr的哪个区间内

5.将处于的该区域内的div悬浮出来

那么接下来就看代码,为了方便使用,我们可以用指令

<div my-scroll>
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

然后我们来做指令

angular.module('myScroll', [], angular.noop).directive('myScroll',function(){
  var obj = {};
  obj = {
    restrict: 'A',
    link: function(scope, elem, attr){
      //获取当前屏幕滚动所至的模块
      var getTopLength = function(lens, scrollTop){
        for(var i = 0; i < lens.length; i++){
         if(scrollTop < val){
           return i
         }
        }
      };

      //设置悬浮模块
      var setFloat = function(scrollIndex){
        scope[scrollIndex] = true;
      };

      //获取每个模块的高度
      var getDivHeight = function(){
        var arr = [];
        elem.children.map(function(ele, ind){
          scope[ind] = false;
          arr.push($(ele)[0].offsetHeight);  
        });
        return arr;
      };

      //获取累加的模块高度
      var getLensAdd = function(arr){
        var lens = [];
        arr.reduce(function(oVal, nVal, index, array){
          lens.push(oVal+nVal);
          return (oVal+nVal);
        }, 0);
      };
      
      //绑定滚动事件
      elem.bind('scroll',function(e){
        //获取当前屏幕的top已经滚动的距离
        var scrollTop = e.currentTarget.scrollTop;
        var arr = getDivHeight();
        var lens = getLensAdd(arr);
        //设置一个初始值
        var scrollIndex = -1;
        //获取当前滚动所至模块值
        var scrollIndex = getTopLength();
        setFloat(scrollIndex);
      });
    };
  };
  return obj;
})

ok,就是这样按照我的想法实现啦

转载于:https://my.oschina.net/codingBingo/blog/808551