angular 自定义 scroll事件
发布时间:2020-12-17 09:44:54 所属栏目:安全 来源:网络整理
导读:在众多事件中,angular 1.x对于scroll事件好像并不咋地,但是最近项目上要用到这玩意儿, 所以就自己写了一个,那么下面来说一下我的思路 先说一下功能的需求吧 一个div里面包了很多个div,外面的div是可以的滚动的, 而根据滚动到不同的区块时,每个内在的div要浮
在众多事件中,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,就是这样按照我的想法实现啦 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |