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

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

先说一下功能的需求吧

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

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

然后说一下我的思路:

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

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

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

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

5.将处于的该区域内的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,就是这样按照我的想法实现啦