关于取消默认事件
现今的 chrome 浏览器,为了实现丝滑顺畅地滑动,活动时间直接执行而不再检测默认事件,这使得无法用 e.preventDafult() 来阻止默认事件。
现在需要添加 {passive: false} 配置
$(document).addEventListener( 'scroll', fun, {passive: false} ) 把事件被动监听设置为 false 之后,就可以正常阻止默认事件了。
关于 scrollTop
为了手动地使页面平滑滚动到某个高度,需要使用 $.animate({scrollTop: val}) 。由于不同浏览器间的差异,绑定 scrollTop 的 DOM 元素是不一样的,比如
chrome 下最外层元素为 html ,活动事件需要绑定在这上面。
而 edge 及移动端的 html 就没有高度,需要绑定在 body 节点上,才能实现滚动。
为了解决这个差异,我们需要把 animate 同时绑定在两个节点上。 $('html, body').animate()
关于获取位置
$().position() ———— 基于父元素,从自身的外边框为点。
$().offset() ———— 基于父元素,从自身内容为点。
$(window).height().width() ———— 获取窗口宽高。
记录一个底部上划继续加载的方法
因为使用的是监听 touchstar 和 touchend 方法,所以该方法只适用于移动端。
$("body").on("touchstart", getTouchS = e => {
//记录页面当前滚动和开始Y坐标,以供比较
startScroll = $(window).scrollTop()
moveStartY = e.originalEvent.changedTouches[0].pageY;
$("body").on("touchend", getTouchE = e => {
//这里判断是否有必要执行,没有必要则直接跳出
if (needToDo?) return false
//若有必要,则获取当前事件发生的状态值
let endScroll = $(window).scrollTop(),
ifBottom = $('body').outerHeight() - $(window).scrollTop() - $(window).height()
//页面不再滚动 或者 leadblock位置超出范围
if (startScroll == endScroll || ifBottom <= 0) {//滑动后没有滚动
moveEndY = e.originalEvent.changedTouches[0].pageY,
Y = moveEndY - moveStartY;
if ( Y < -60 ) { //至少上滑60个单位
//这里执行加载或之类的操作
//*****
//解绑事件
$("body").off("touchstart", getTouchS)
$("body").off("touchend", getTouchE)
主要的思路就是监听“触摸开始”和“触摸结束”两个事件,分别获取事件当前的触摸点坐标和文档滚动的值,进行对比判断“触摸是否有滑动”以及“文档是否有滚动(到底)”,来执行需要的方法。下面说说几个注意点:
有必要的话,可以对事件监听添加阻止默认事件,需要在 on() 的第三个参数传入 false 。
执行触摸结束监听时,优先判断是否需要执行,以节约性能。
为了避免微信 iOS端底部导航栏的问题(显隐不定,出现时会减少视窗高度), $(window).height() 必须实时获取而不是用全局变量。
同样为了节省性能,当执行完毕后使用 off() 对事件进行解绑,当需要传入函数名参数,所以绑定是不能使用匿名函数。
判定兼容后的阻止默认事件
var e=e||window.event;
e.stopPropagation();//阻止事件的传播(包括捕获也包括冒泡)
// 兼容处理
if (e.stopPropagation) {