javascript - 触摸滚动 div 标签？

Question

好的，我有一些 div 标签，在一个部分标签内，在选定的菜单按钮上单击滚动到该选定的 div 区域。

每个 div 区域都有一个 translate3d CSS，将每个 div 一个一个移出另一个。然后代码触发“点击”事件，将 div 标签移动到浏览器窗口中。

CSS 代码

#Area1 {
    position: absolute;
    top: 0px;
    z-index: 10;
    border-left:10px solid #FFFFFF;
    width: 100%;
    height: 100%;
    padding-left: 10%;
    padding-right: 10%;
    background-color: #66cc33;
    -moz-transform:translate3d(100%,0%,0px) skew(16deg, 0);
    -webkit-transform: translate3d(100%,0%,0px) skew(16deg, 0);
}

Area2 代码相同，但设置为 200%。这个 div 标签设置在一个 div 包装器集内，其上有相对位置。

Jquery代码移动div

  $( "#AreaOne" ).animate({left: "0%"}, 1000, 'easeInOutQuad');
  $( "#AreaTwo" ).delay(100).animate({left: "0%"}, 1000, 'easeInOutQuad');

一切正常。完全没有问题。但我也希望能够浏览这些 div。但是在我正在测试的 iPhone 上不会这样做。现在我认为这是因为我使用了点击事件功能？我真的不想更改我编写的代码，主要是因为它工作正常。

现在我尝试在 div 上使用 touchwipe，但是没有用，不确定我是否正确调用它:)。

只是想知道是否有一种快速简单的方法可以让 div 在触摸时滚动？

非常感谢，

格伦。

附言。对不起，如果我没有很好地解释自己。如果不清楚，请告诉我，我会更改我的问题。

Answer 1

您是否尝试过添加特定于 web-kit 的声明？

overflow-y: scroll; /* has to be scroll, not auto */
-webkit-overflow-scrolling: touch; /* momentum scrolling, iOS Safari only*/

此处更深入:http://css-tricks.com/snippets/css/momentum-scrolling-on-ios-overflow-elements/

另请参阅 -webkit-overflow-scrolling 的文档.