转载文章 -- 难搞的滚动事件(滚动默认，scrollTop)

关于取消默认事件

现今的 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;
}

作者：Primers
链接：https://www.jianshu.com/p/e8d68a9bba54
来源：简书