关于取消默认事件
现今的 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) {
e.stopPropagation();
}else{
// IE浏览器
e.cancelBubble=true;
}
网友评论