横划滚动曝光

横向滚动推荐swiper,常用于移动端网站的内容触摸滑动,是一款功能及其强大触摸滑动插件。
如果使用vue可以使用vue-awesome-swiper组件,如果是横向滑动曝光,可以使用其中的事件来监听滑动位置。
本次只是讨论曝光问题,更多文档内接口参考下面链接。

1
2
3
4
5
6
7
8
9
10
11
var mySwiper = new Swiper('.swiper-box',{
on:{
slideNextTransitionEnd: function(){
// 正向切换结束时执行
if(this.activeIndex > 3){
// 大于当前已经曝光的数目
console.log(`expo_${this.activeIndex}`)
}
},
},
})

具体参考资料:

vue-awesome-swiper
vue-awesome-swiper示例
swiper4.x配置选项

垂直滚动曝光


需要获得当前元素距离顶部的距离,那么offsetTop是不能满足条件的,offsetTop是根据offsetParent来定的,offsetParent又是根据子元素的父元素是否有定位属性来决定,所以当前元素一直向上的父元素和祖先元素直到body都没有定位属性(position),那么直接在当前元素上取offsetTop是没有问题的,但是这怎么可能?
所以就需要递归计算到body,才能正确计算出当前元素到顶的距离。

1
2
3
4
5
6
7
const getOffsetBodyTop = (el) => {
if (el.offsetParent.nodeName.toLowerCase() === 'body') {
return el.offsetTop
} else {
return el.offsetTop + getOffsetBodyTop(el.offsetParent)
}
}

接下来就是监听事件了,需要监听当前页面已滚动的高度,当前设备视口的高度,和上面提到的该元素距离顶部的距离。

1
2
3
4
5
6
7
8
9
10
11
12
const verticalExpoHandler = (el, callback) => {
if ((el && el.className.indexOf('hasExpo') > -1) || !el) return
const srcollYTop = document.body.scrollTop || document.documentElement.scrollTop
const viewHeight = document.body.clientHeight //当前html和body要设置成100%
const offsetBodyTop = getOffsetBodyTop(el)
const expoHeight = srcollYTop + viewHeight
// 曝光条件
if (expoHeight >= offsetBodyTop) {
el.className = el.className + ' hasExpo'
callback && callback()
}
}

1
2
// 以下生产环境下,别忘记加节流函数哦
window.addEventLisener('srcoll',verticalExpoHandler)

原创内容,欢迎交流转载请注明出处