滚动上报实现

本文作者:IMWeb 何璇 原文出处:IMWeb社区 未经同意,禁止转载

最近产品说要在一个课程卡片列表页面中收集用户滚动行为的数据,大致是要获取用户滚动列表后曝光过的课程卡片数据。

scroll

那还不简单,直接监听列表元素的scroll事件,然后上报呗:

$list.on('scroll', () => {
  let itemHeight = $list.find('li').outerHeight(true);
  let scrollTop = $list.scrollTop();
  let count = Math.ceil(scrollTop/itemHeight);

  // report count...
});

想必聪明的你一看就知道有点问题:

  • scroll事件触发的那么频繁,尽管加上节流也上报了很多次无用数据
  • 首屏的列表卡片曝光个数并没有上报,需要额外地手动触发一次scroll事件

beforeunload

为了避免不必要的上报,我想只在页面卸载的时候上报一次数据应该就可以了吧,于是我就尝试了beforeunload事件:

let maxCount = 0;

// scroll to change maxCount...

window.addEventListener('beforeunload', () => {
  // report maxCount...
});

经过实践,在QQ客户端的内嵌页面可能长时间都不会关闭,上报点依旧不可控。

blur?

思前想后,还是在上报次数上折中,决定尝试失焦事件。

但是依据MDN的blur event文档,它是不冒泡的,而如果要在列表元素上监听焦点相关的事件,是需要在元素上增加tabIndex属性的,在个别浏览器的实现中,对于此种容器元素获取焦点会有边框特效,带来副作用,而且聚焦的范围也缩小了。

所以采用focusout事件是一个较为不错的选择:

let maxCount = 0;
let reportedCount;

// scroll to change maxCount...

$(document.body).on('focusout', () => {
  if (maxCount > reportedCount) { // 只需上报最大值即可
      // report maxCount...
  }
});

focusout事件的兼容性还是不错的,因为此需求只需要在QQ内嵌页中完成,所以并没有考虑到firefox的兼容性,并且它是冒泡的。

总结

以上是本人在此需求点上的一些浅见,如果聪明的你有更好的实践或者方法的话欢迎指教~

作为前端开发者,系统性地学习DOM,加深对它的理解才更好地在业务实践中抉择。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏web编程技术分享

【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第十节)1. 详情页面的布局2. 从主页面到详情页面的跳转问题

36240
来自专栏腾讯大讲堂的专栏

使用Laya引擎开发微信小游戏

使用一个简单的游戏开发示例,由浅入深,介绍了如何用Laya引擎开发微信小游戏。

2K80
来自专栏王大锤

iOS各种调试技巧豪华套餐

42890
来自专栏bboysoul

使用ArchiSteamFarm在树莓派挂卡

挂卡,我也是今天知道这个词语,意思就是steam中某些游戏有集换式卡牌,集齐能合成徽章有经验,玩游戏到一定时间可以获得总数一半数量的卡,挂卡就是挂游戏时间获得这...

20240
来自专栏河湾欢儿的专栏

html5标签

什么是html5? 仅仅是狭义的概念。h5草案前身叫做web application 由WHATWG组织编写,在2007年提交到了w3c,w3c起名叫做HTM...

38810
来自专栏无原型不设计

Balanced-工具类App原型分享

Balanced是一款记事类的工具App,这类App在设计的时候讲究简单易用,如果操作太复杂,就不能做到记录事件的及时性和快速性。在制作原型时,这次尝试了将A...

33650
来自专栏速成应用小程序开发平台

新手教程--手把手教你从零开始制作一款电商必备的商城小程序

近年来,在电商、新零售趋势的影响下,实体零售商也都在谋求自身的渠道变革,完善消费体验。如今微信已有超过十亿的用户,市场巨大,而微信小程序的开通不仅能够降低品牌...

27520
来自专栏编程微刊

layer弹框在实际项目中的一些应用

23850
来自专栏葬爱家族

Android高德之旅(6)

我们看惯了高德地图,似乎已经习惯了它的ui,认为河流就是蓝色的,土地就是灰色的,交通路网就是黄色的。其实这个ui也是可以改的。今天就来使用下自定义地图ui。

14820
来自专栏贺嘉的专栏

教你写一个云上Hello world小程序

小程序上线一月有余,有不少创业团队如朝夕日历、小睡眠、小密圈等工具性的应用享受了这一波产品红利,收获了数十万新用户。笔者近期接触了不少从事后端开发的Java、C...

2.7K00

扫码关注云+社区

领取腾讯云代金券