Carousel - 元素位置在 touchend 上视觉变化答案

【问题标题】：Carousel - element position changes visually on touchendCarousel - 元素位置在 touchend 上视觉变化
【发布时间】：2011-02-15 01:05:44
【问题描述】：

我正在尝试为移动 safari 构建一个触摸/滑动轮播。到目前为止，一切都很好，但是当我在滑动元素后尝试设置元素的左侧位置时遇到了问题。左侧位置在 CSS 中设置正确，但显示不正确。

对不起，如果不清楚，但有点难以描述。

Please see the problem here (please view on your iOS or Android device).

为了重现，

触摸项目 3
向左滑动，刚好足以使项目 1 离开屏幕（不要将手指从屏幕上移开。您应该会看到项目 2、项目 3、项目 4、项目 5 和项目的一些6.
将手指从屏幕上移开（您会看到项目“跳跃”。项目 3 现在是项目 2 所在的位置，项目 4 是项目 3 所在的位置，等等）
现在，再次尝试向左滑动。您将再次“跳跃”项目。第 2 项又回到了应有的位置。

基本上，我所做的是根据滑动距离翻译项目。在触摸端，我将元素的位置设置为翻译位置。这就是它崩溃的地方。

我所有的代码都在上面的网址中。

任何帮助将不胜感激。

谢谢！

【问题讨论】：

标签： javascript touch mobile-safari iphone multi-touch

【解决方案1】：

知道了！

所以我的问题不是重置转换。我添加了这一行：

items[i].style.webkitTransform = "translate3d(0px, 0px, 0px)";

到我的 updatePosition 函数，一切都很好！

  function updatePosition(){
    for(var i=0; i<items.length; i++){
      var translatedLeft = getTranslatedPosition(items[i]).left;
      items[i].style.left = translatedLeft + "px";
      items[i].style.webkitTransform = "translate3d(0px, 0px, 0px)";
    }
  }

在这里工作演示：http://dl.dropbox.com/u/10250170/dev/carousel/touch_test.html（在 iPhone 模拟器或您的 iOS 或 Android 设备中查看）

【讨论】：