jQuery touchSwipe 内容滚动功能答案

【问题标题】：jQuery touchSwipe content scroll functionjQuery touchSwipe 内容滚动功能
【发布时间】：2012-08-28 11:34:14
【问题描述】：

我正在使用 jQuery 和 touchSwipe 插件来上下滚动内容。我遇到了一些与数学相关的问题，想看看社区是否可以快速帮助我解决这个问题。

touchSwipe“距离”变量仅返回从零开始的正值，因此当用户向上滑动然后决定向下滑动时，问题就出现了，因为距离值从 ex:(0 initial, 15up, 32up 、20 上、5 上、10 下、40 下）。我创建了 4 个 if 语句来捕捉所有这些情况。如何处理“方向改变”if语句？

touchSwipe：http://labs.skinkers.com/touchSwipe/

上下滑动功能：

var _scrolling=false;
var _prev=0;
$("#list").swipe({
  swipeStatus:function(event, phase, direction, distance, fingerCount) {
    if(phase=="end"){return false;}
    if(phase=="move" && !_scrolling) {
      var t = parseInt($("#list").css("top").split('px')[0]);
      var s = 0;
      if(direction=="up" && (distance-_prev) > 0){
         //still moving up
         s = t-(distance-_prev);
         _prev=distance;
       } else if(direction=="up" && (distance-_prev) < 0){
          //direction change - moving down    
       } else if(direction=="down" && (distance-_prev) > 0){
         //still moving down
          s = t+(distance-_prev);
         _prev=distance;
       } else if(direction=="down" && (distance-_prev) < 0){
          //direction change - moving up
       }
       _scrolling=true;
       $("#list").animate({ top:s }, 70, function() {_scrolling=false;});   
   }<!--if end-->
  }<!--swipeStatus end-->
});

【问题讨论】：

标签： javascript jquery math mobile scroll

【解决方案1】：

所以几天后我解决了这个问题，修改了原来的“swipeStatus”函数，并创建了一个非常高效的全功能函数来使用 touchSwipe jQuery 插件滚动一个绝对区域。

解决方案：

function swipeScroll(c,b,pd,f){
    $(c).swipe({//c style must be position:absolute;top:0; b style must be position:relative;
      swipeStatus:function(event, phase, direction, distance, fingerCount) {
        if(phase=="start"){pd=0;}
        if(phase=="end"){return false;}
        if(phase=="move" && pd!=distance){
          var t = parseInt($(c).css("top"),10);
          var u = (pd-distance);
          if(direction=="up" && t != u){ t+=u; }else if(direction=="down" && t != -u){ t-=u; }
          pd=distance;
          if(t > 0 || $(b).height() > $(c).height()){t=0;}//top of content
          else if(($(b).height()-t) >= $(c).height()){//bottom of content
            t=$(b).height()-$(c).height();
            if(typeof f != "undefined"){f();}
          }
          $(c).css("top",t);
        }
      }
    });
}

功能参数说明：

c：要滚动的绝对内容 b：围绕内容“c”的相对容器 pd：用于存储从前一个滚动移动的距离的变量 f: 滚动到底部时调用的函数

注意：“b”必须是相对位置，“c”必须是绝对位置，top:0

使用示例：

var distance;
swipeScroll("#list","#body",distance, function() { alert("bottom"); });

研究：

而不是使用 "$(c).css("top",t);"我还使用 jQuery animate() 函数对此进行了测试，以提供平滑的滑动效果，但这实际上使滚动变得迟缓。动画给出了意想不到的结果，因为“t”有时会在滑动过快时跳过“0”，并且方向会从“顶部”变为“向下”，导致滚动的内容突然跳跃。

【讨论】：

【解决方案2】：

请注意：使用该行

if (phase == "end") { return false; }

将阻止使用点击事件。因此，如果您需要该事件，则必须删除此行。

【讨论】：