2011-12-06 21 views
3

私はjQueryのモバイルとモバイルアプリを開発していると私は、次の問題があります。を防ぐページスクロール

私は、縦スクロールと内側のdivを持っているメニューを持っています。一旦スクロールがコンテナの底に達すると、それはページ自体をスクロールし始めます、そして、これは私が望むものではありません。その行動を防ぐ方法はありますか?私は、メニューのスクロールを一番下までスクロールできるようにして、それが起こったときにメニューをスクロールしているときにページのスクロールを拒否しますか?

アップデート: - http://jsfiddle.net/Wg8pk/

ここで同じ問題を抱えている生の例を示します。

「メニューオプション」を下にスクロールすると、メニューが最後に達したときにページが下にスクロールします。

+0

スクロール(常にコンテナを押す何か)を引き起こす悪いCSSマークアップがあるような音がする - あなたの質問については、いつでも.css( 'オーバーフロー'、 '非表示')またはそのルールを持つクラスを追加することができますその要素には –

+0

の垂直スクロールの下にコンテンツがありますか?それがページの一番下にある場合は、うまくいくはずです。フッターがありますか? –

+0

今はメニューの下にコンテンツがありません。メニューには絶対位置があり、動的な高さはtop:202pxとbottom:3pxを設定し、overflow-y:autoを設定して垂直スクロールを設定します。 このメニューは、すべてのページに表示されるため、data-role = "page"内にないため、jQueryモバイルの解剖図がありません。 私はdivをdata-role = "content"の中に垂直スクロールで置くためのテストを行いましたが、問題は解決しません。 –

答えて

0

メニューの高さを固定し、cssを使用してオーバーフローを防ぐ必要があります。あなたがスクロールされている要素にevent.preventDefault()を呼び出すことについて

1

どのように動作するはず ユーザーoverflow:hidden;

$('#my-scroll-div').bind('touchmove', function (event) { 
    event.preventDefault(); 
}); 

私はイベントがバインドする方が良いだろうかわからないんだけど、それがうまくいくようにtouchmove思えます。あなたがコードのjsfiddleをセットアップしたら、より良い助言を与えることができます。

+0

これは、同じ問題を抱えている生の例です - http://jsfiddle.net/Wg8pk/。 「メニューオプション」をスクロールすると、メニューが最後に達したときにページが下にスクロールします。 –

+0

@Sérgiohttp://jsfiddle.net/Wg8pk/1/ Androidデバイスでテストしましたが、 '#mainNavigation'要素をスクロールしようとすると動きません。 – Jasper

+0

@ジャスパーの目的は#mainNavigationをブロックするのではなく、#mainNavigationのスクロールが終わりに達したときにページのスクロールを防ぐことです。 –