モバイルサイトのためにネストされたdivスクロール可能を作成します

StackOverflow https://stackoverflow.com/questions/8840200

質問

jQueryモバイルサイトでスクロール可能なネストされたdivを作成することは可能ですか？基本的に、固定ヘッダーとフッターが必要ですが、中央のセクションはスクロール可能です。オーバーフロー：スクロールを設定しようとしました（divの幅と高さを設定します）が、iOSシミュレーターでは正しく動作しないようです。 （私はjsfiddleをしますが、Jqueryモバイルのものでは機能しません）

これがHTMLです：

<body> 
<div data-role="page">
   <div data-role="header">
   <div id="header_image">
      <img src="images/top_logo.png" />
   </div>
   </div><!-- /header -->
       <div id="content_bg">
       <div data-role="content">
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
        <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
   </div><!-- /content -->
   </div><!-- /content_bg -->
   <div data-role="footer" data-theme="b">
   <div id="footer_text">
      <center><h4>Page Footer</h4></center>
   </div><!-- /footer_text -->
   </div><!-- /footer -->
   </div><!-- /page -->

関連するCSSは次のとおりです。

#content_bg{
    background-color:#0038a5;
    height:310px;
    width:100%;
    text-size:11px;
    color:white;
    overflow: scroll;
    }

この問題に輝くことができる光をありがとう！

役に立ちましたか？

解決

Iscroll、FlexScroll、jQuery Scrollview実験など、多くのソリューションがあります（これらは私が正常に使用しました）。

FlexScrollはセットアップが最も簡単で、それらはすべて同じコードウェイトです。

iscroll 4-> http://cubiq.org/iscroll-4 （必ず調査してください lite コードウェイトが小さく、基本的な関数を実行しているため、バージョン）

FlexScroll-> http://www.hesido.com/web.php?page=customscrollbar （私はこれが好きです、それはカスタムスクロールバーを作成することですが、モバイルデバイスのスクロール可能な領域のタッチイベントをサポートしています）

jQueryモバイルScrollView-> http://jquerymobile.com/test/experiments/scrollview/ （jqueryモバイルチームによって作成）

アップデート

Stackoverflowに関するIsCroll関連の質問に多くの質問に答えました。ここにそれらを表示するためのリンクがあります（IsCrollを使用して問題に遭遇するケース内）： https://stackoverflow.com/search?q = user%3A752738+％5bjquery-mobile%5d+ iscroll&submit = search

他のヒント

IsCrollはあなたの解決策です。そのウェブサイトを確認してください

http://cubiq.org/iscroll-4

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top