页面滚动事件的使用

蚊子前端博客
发布于 2014-12-14 07:00
文章中比较详细的介绍滚动事件使用的场景和方法

在现在更加追求页面加载速度和用户体验的情况下,页面的滚动事件使用的越来越多。通常我们使用滚动事件主要做的事情主要有:

  • ajax异步加载,加快页面首次加载的速度

  • 懒加载(或延迟加载):先把HTML元素放到textarea标签中,或把img的链接先放到一个字段里,页面滚动到某个位置时才进行开始加载

  • 顶部导航或侧边导航的焦点跟踪

  • 侧边数字导航的跟踪(例如百度经验)

  • “回到顶部”功能

    在这个demo中我们能够看到上面列出的几乎所有的事件:【狠狠点击哦

image-蚊子的前端博客

本项目中用滚动事件实现了:懒加载,顶部导航焦点追踪,侧边数字导航和“回到顶部”功能,不过demo中没有实现异步加载的功能,其实懒加载和异步加载的原理差不多,只不过一个是先把数据请求了只是不加载,一个是滚动到位置了才用ajax请求数据。

1. 顶部导航的焦点追踪

焦点的追踪,顾名思义:当我们移动到哪个区域时,焦点就移动到哪个导航元素上,指示我们当前查看的是哪个区域。当然,这个功能的前提是我们需要知道每个元素距内容顶部的高度。

COPYJAVASCRIPT

// 获取每个item距顶部的高度,$item为区域的综合,listTop用来存储每个区域距顶部的高度 $item.each(function(index, el) { listTop.push($(el).offset().top); });

我们从demo中也能看到,当aaaa区域到达顶部时,导航的position变成fixed,然后开始跟踪;滚动条向上滑动,aaaa离开顶部时,导航重新变回原来的样式。其实,这只是我们看到是这个样子,导航的样式切换来切换去。但实际上我们并不是这样实现的,实际中这是两个导航(O(∩_∩)O~),只不过让其中一个导航(称为A)不动,另一个导航(称为B)显示隐藏而已,导航B填充导航A的内容即可。在获取了这些item距顶部的高度后,那么我们就在滚动事件中判断,滚动条的高度是否超过了第一个item的高度,如果超过导航B显示即可,否则导航B隐藏(代码中.navfix即导航B,winTop为滚动条的高度)。

COPYJAVASCRIPT

// 是否显示顶部导航 winTop < listTop[0] ? $(".navfix").hide() : $(".navfix").show();

现在重点来了,导航B显示出来了,那么就需要当前所在的区域和焦点对应上:刚才我们已经获取到每个区域的高度了,现在我们就计算一下滚动条的高度在哪个区间(编号K),计算出区间后,我们就可以给哪个导航元素相应的样式了:

  • winTop

  • winTop>=listTop[0] && winTop

  • winTop>=listTop[1] && winTop

  • winTop>=listTop[2] && winTop

  • inTop>=listTop[3] : 在区域dddd

COPYJAVASCRIPT

// 检测所在区域 for (; i < t; i++) { if ( winTop > listTop[t-1] ) { k = t-1; break; }else if ( winTop>=listTop[i-1] && winTop < listTop[i] ) { k = i-1; break; } } // 顶部导航效果 if( k > -1 ){ $li.removeClass('hover'); $li.eq(k).addClass('hover'); }

k默认的是-1,即不在任何区域,若k>-1即肯定处在某个区域内,先清除导航中所有元素的样式,然后再指定样式

2. 侧边数字导航

其实侧边数字导航与顶部导航实现的原理一样:数字侧边栏也是有两个(跟着区域移动的数字导航A,固定导航B),当某个数字跟着区域移动时,导航B中相应的数字隐藏;当数字到达顶部时,导航A中的数字隐藏,导航B中的数字显示;即使区域的数字到达顶部不再移动,那也不能立即变成灰色,应当还是绿色,只有该区域超过窗口上边框才能变成蓝色。这就形成了我们现在看到的效果。

这里的重点是计算出什么时候隐藏导航A中的数字,显示导航B中的数字,而且导航B的数字显示什么颜色:每次滚动时,都首先让导航A中的数字显示,导航B的数字隐藏,然后计算每个区域所在的位置,如果某个区域距顶部的高度与滚动条的高度小于了导航B的数字的高度,就说明导航A中的数字该隐藏,导航B的数字该显示了;那显示的数字呈现什么颜色呢,刚才我们计算出了当前所在区域的编号K,那么区域编号小于编号K都是已经看过的,就显示灰色,否则就是正在看或者没看的区域就显示绿色。

COPYJAVASCRIPT

// 侧边数字导航 $item.find(".item-icon").show(); // 跟着区域移动的数字 $step_a.css('visibility', 'hidden');// 固定导航的数字 for(i=0; i<t; i++){ if(listTop[i]-winTop<i*32+35){ $item.eq(i).find(".item-icon").hide(); $step_a.eq(i).css({'visibility':'visible', 'background-color': (i<k?'#888':'#008B00') }); } }

3. 懒加载

通常加载DOM元素时需要对页面进行渲染,耗费时间,那么我们就先把这些DOM元素存储起来,等需要加载的时候再去加载,用来加快页面初始的加载;img图片同理。

COPYJAVASCRIPT

// 懒加载底部内容 if( $copyright.attr("loaded")!="loaded" && (winTop+800 > copyTop)){ var text = $copyright.find('textarea').val(); $copyright.html(text); $copyright.attr("loaded", "loaded"); }

图片的路径我们可以先放到一个字段中,比如data-src,等需要加载该图片时,则从data-src中取出该值并赋值给src,然后请求图片.

4. “回到顶部”功能

“回到顶部”功能,即将scrollTop的值设置为0的过程,如果需要缓冲效果,那么就给它一个缓冲时间

COPYJAVASCRIPT

// 回到顶部 $("#backtotop").on('click', function(event) { event = event || window.event; var winTop = $(window).scrollTop(); $('body').animate({scrollTop:0}, winTop/4); event.preventDefault(); });

5. 其他

当然,这里还有一些东西没有提到,不过也很重要,比如如何固定滚动条不能移动,回到顶部里的小三角的制作等等;

github地址:github

我的博客:博客园-页面滚动

标签:
阅读(355)

公众号:

qrcode

微信公众号:前端小茶馆

公众号:

qrcode

微信公众号:前端小茶馆