难搞的滚动事件(滚动默认,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) {