0

私のページにリストがあります。リストをスクロール可能にしたいのですが、ページの残りの部分をすべて含まないリストのみです...私はiScrolljsファイルを使用しています

これは私のコードです：

<div id="ds">
            <div id="rtrt">
    <ul data-role="listview" id="a1"                
<li>
<a href="#">1</a>
</li>
<li>
<a href="#">2</a>
</li>
<li>
<a href="#">3</a>
</li>
.
.
.
.
         </ul>
            </div>
</div>

<script type="text/javascript">
 var myScroll;
        function loaded() {
                myScroll = new iScroll('rtrt');
            }

document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
document.addEventListener('DOMContentLoaded', function () { setTimeout(loaded, 200); }, false);
</script>

しかし、スクロールはすべてのウィンドウのリストの上にあるので、すべての画面をスクロールします。画面の中央にあるリストのみをスクロールするにはどうすればよいですか（モバイルの場合）。

何か案は？

4

2 に答える 2

0

html/css のみを使用でき、JavaScript がなくても問題なく動作します。これには、2 つのセクションを作成する必要があります。最初のセクションはこれで修正され、スクロールしたくないコンテンツを配置し、2 番目のセクションに必要なコンテンツを配置します。スクロールすると、このようになります

<style type="text/css">
#first-section {
    height:100px;
    position:fixed;
    top:0;
    left:0;
    right:0;
}
#second-section{
    position:absolute;
    top:100px;
    left:0;
    right:0;
    bottom:0;
    overflow:auto;
}
</style>
<div id="first-section"><!--put fixed content here--></div>
<div id="second-section"><!--put scrollable content here--></div>
于 2012-11-27T10:06:04.943 に答える
0

CSS を使用すると、同じ結果を得ることができます: (300 ピクセルの高さは単なる例です。div を好きな/必要な高さにします):

.rtrt{
height: 300px;
overflow: scroll
}
于 2012-11-27T09:05:30.733 に答える