在众多事件中,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,就是这样按照我的想法实现啦