css - 在窗口中间使用 iScroll 滚动列表

Question

我的页面中有一个列表，我希望列表可以滚动，只有列表没有页面的所有其余部分...我使用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>

但是滚动是在所有窗口上的列表上，所以我在整个屏幕上滚动，我怎样才能只滚动屏幕中间的列表（在移动设备中）。

有任何想法吗？

Answer 1

使用 CSS 可以达到相同的结果：（300 px 的高度只是一个例子，让 div 尽可能高）：

.rtrt{
height: 300px;
overflow: scroll
}

Answer 2

您只能使用 html/css 并且没有 javascript 也可以正常工作 您必须制作两个部分 第一部分固定在此放置您不想滚动的内容，然后在第二部分放置您需要的内容滚动它应该是这样的

<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>