Question

我使用3d变换在我的phonegap应用程序中实现了一个页面滑块，因此速度很快。

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

我只是将一个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;
}

Answer 1

您可以使用以下CSS：

body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow-x: hidden !important;
    overflow-y: scroll !important; //or auto
}

Phonegap：仅限于滚动到Y轴

1 个答案: