我有一个页面,其中有一个固定的页眉和固定的页脚,并且我在内容中有列表,并且我正在将动态数据附加到列表视图。
html
<div data-role="page">
<div data-role="header" data-position="fixed">
<h1> list header </list>
</div>
<div data-role="content" class="listscroll">
<div id="list"></div>
</div>
<div data-role="footer" data-position="fixed">
<h1> list footer </list>
</div>
</div>
JS
var k = '<ul data-role="listview">';
for (i = 0; i < 5; i++) {
k += '<li><div style="height:80%;"><a href="#quoteList_detailPage" data-role="none"><img src="http://www.jucoolimages.com/images/quotes/quotes_18.gif" width="100%"height="80px"></a></div></li>';
k += '<div style="height:105px;text-shadow:none;" id="' + i + '">' +
'<div style="height:80%;"><a href="#" data-role="none" data-transition="slide"><img src="http://www.jucoolimages.com/images/quotes/quotes_18.gif" width="100%"height="80px"></a>' +
'</div></div>';
}
k += '</ul>';
$('#list').html(k);
$('#list ul').listview();
CSS
.listscroll {
overflow-y: scroll;
max-height: 336px;
max-width: 100%;
-webkit-overflow-scrolling: touch;
}
但是加载的页面有两个垂直滚动条:内层比页面略大,外层是页面的长度。
如何删除外部滚动条?
谢谢:)