3D 変換を使用して phonegap アプリにページ スライダーを実装したので、高速です。
見栄えがよく、正常に機能しますが、ページを左右(x軸)を含む任意の方向にスクロールできることに気付きました。しかし、どういうわけかそれを防ぐ必要があります.Javascript/CSSまたはios/androidのいずれかで、ユーザーがx軸でスクロールするのを防ぐ方法はありますか? そうでなければ、彼は簡単に次の画面にドラッグできます。
次の CSS を使用して、div のリストをコンテナーに配置し、それらをすべて右側に配置するだけです。
.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;
}