在众多事件中,angular 1.x对于scroll事件好像并不咋地,但是最近项目上要用到这玩意儿,
所以就自己写了一个,那么下面来说一下我的思路
先说一下功能的需求吧
一个div里面包了很多个div,外面的div是可以的滚动的,
而根据滚动到不同的区块时,每个内在的div要浮现出一块部分
然后说一下我的思路:
1.获取每一个悬浮模块的高度 -- divHeight
2.将所有高度累加成一个新的数组 -- heightArr
3.获取当前屏幕的滚动高度 -- scrollHeight
4.比较divHeight处于heightArr的哪个区间内
5.将处于的该区域内的div悬浮出来
那么接下来就看代码,为了方便使用,我们可以用指令
1 2 3
然后我们来做指令
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,就是这样按照我的想法实现啦