在众多事件中,angular 1.x对于scroll事件好像并不咋地,但是最近项目上要用到这玩意儿,
所以就自己写了一个,那么下面来说一下我的思路
先说一下功能的需求吧
一个div里面包了很多个div,外面的div是可以的滚动的,
而根据滚动到不同的区块时,每个内在的div要浮现出一块部分
然后说一下我的思路:
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://www.jb51.cc/angularjs/148412.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。