一部の jQuery モバイル タブには、スクロールバーを必要とするコンテンツがあります。
それらを制御するナビゲーションバーは、このフィドルのようにヘッダーにあります。
タブ コンテンツのすべてのレベルで設定しようとしましheight: 100%; overflow: auto;
たが、スクロールバーはまだページ全体に適用されています。
タブ付きコンテンツのみにオーバーフロー スクロールバーを適応的に適用するにはどうすればよいですか?
HTML
<div data-role="page" id="mainPage">
<div data-role="tabs" id="tabs">
<div data-role="header" style="overflow:hidden;">
<h1>I'm a header</h1>
<a href="#" data-icon="gear" class="ui-btn-right">Options</a>
<div data-role="navbar">
<ul>
<li><a href="#one" class="ui-btn-active">One</a></li>
<li><a href="#two">Two</a></li>
<li><a href="#">Three</a></li>
</ul>
</div>
</div>
<div id="one" class="ui-body-d ui-content tabContent">
<h1>First tab contents</h1>
</div>
<div id="two">
<ul data-role="listview" data-inset="true">
<li><a href="#">Acura</a></li>
<li><a href="#">Audi</a></li>
<li><a href="#">BMW</a></li>
<li><a href="#">Cadillac</a></li>
<li><a href="#">Ferrari</a></li>
</ul>
</div>
</div>
</div>
JS
$(document).ready(function() {
var $one = $('#one')
for(var i=0; i<1000; i++){
$one.append('<br/>content')
}
})
CSS
body{
overflow:hidden;
}
.tabContent{
height:100%;
overflow:auto;
}