Phonegap：限制仅滚动到Y轴

我在我的phonegap应用程序中使用3d变换实现了页面滑动条，所以它的速度非常快。Phonegap：限制仅滚动到Y轴

它看起来不错，工作正常，但现在我意识到，我可以在任何方向上滚动页面，包括左侧和右侧（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事件滚动是一个问题在这里。

任何想法？

UPDATE：

由于它仍然没有工作。给更多的信息。我的HTML看起来像这样：

... ...

你知道从我的网页类的CSS。我的容器ID具有以下规则：

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

来源

2013-10-09 NovumCoder

您可以使用下面的CSS：

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

来源

2013-10-09 15:36:16 Dom

没有帮助。第一个屏幕是可滚动的，但如果在右侧没有更多屏幕出现在视图之外，它就可以工作。奇怪。 – NovumCoder

已更新的答案。添加！重要标签以确保它不会被进一步覆盖。确保你把它放在体内，以便它处于最高层。 – Dom

这适用于桌面浏览器。但在移动我有touchmove事件似乎不受溢出设置的影响，我仍然可以在两个轴上滚动。 – NovumCoder

Phonegap：限制仅滚动到Y轴

回答

相关问题