Question

我的页面中有一个列表，我希望列表是可滚动的，只有列表没有页面的其余部分...我使用iScroll js文件

这是我的代码：

<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的情况下正常工作为此你必须做两节第一部分是固定在这个put你不想滚动的内容在第二部分中，您需要滚动的内容应该是这样的

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

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

2 个答案: