2

我使用 3d 变换在我的 phonegap 应用程序中实现了一个页面滑块，所以它很快。

它看起来很棒并且工作正常，但现在我意识到，我可以在任何方向滚动页面，包括左右（x 轴）。但我需要以某种方式防止这种情况发生，有什么方法可以防止用户在 x 轴上滚动，无论是 Javascript/CSS 还是 ios/android？否则他可以轻松拖到下一个屏幕。

我只是将一个 div 列表放入一个容器中，并使用以下 CSS 将它们全部放在右侧：

.page {
  background-color: #fff;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  -webkit-transform: translate3d(100%, 0, 0);
  transform: translate3d(100%, 0, 0);
  padding: 10px 10px 30px 10px;
  -webkit-transition-duration: .25s;
  transition-duration: .25s;
}

然后我使用另一个类，它只是将 x 转换重置回 0%，所以它从右向左滑动，而当前页面从中心向左滑动 -100%。但是这里只有通过 touchmove 事件滚动是一个问题。

任何想法？

更新：

因为它仍然无法正常工作。提供更多信息。我的 HTML 如下所示：

……

你知道我的页面类中的 CSS。我的容器 id 有以下规则：

#container {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
4

1 回答 1

0

您可以使用以下 CSS：

body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    overflow-y: scroll !important; //or auto
}
于 2013-10-09T15:36:16.847 回答