我使用网格来模拟某种分屏视图，其中我想使用左侧与列表视图一起显示一些导航按钮，右侧显示一些内容。
现在listview很长，我想让它可滚动。因此，listview窗格应该是可滚动的，而内容窗格保持在全屏高度(或稍后获得自己的可滚动内容窗格)。jQM如何做到这一点?非常感谢!
解决方案
你想要的不是那么容易做到的。无论你在什么平台上工作，几乎不可能创建两个可滚动的窗格，而且每个窗格都是单独工作的，特别是在移动设备上。但一如既往，有一个变通的办法。工作示例:http://example.gajotres.net/iscrollview/
我不能创建一个jsFiddle，因为iscrollview在那个环境下不起作用。如果你还不知道， iscrollview 是jQuery移动插件创建的包装 iscroll 。Iscroll是为移动浏览器提供可滚动内容而创建的插件。
这个实现使用固定的浮动右面板。虽然页面的其余部分是可滚动的，但这个面板会给你一种错觉，好像它固定在页面的右侧。
测试- Windows Firefox Windows Chrome Android Chrome
- Stack Samsung Galaxy S3 Android浏览器
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile-1.3.1.min.css" />
<link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview.css" />
<link rel="stylesheet" href="http://www.fajrunt.org/css/jquery.mobile.iscrollview-pull.css" />
<style>
#iscroll-listview {
margin: 0 !important;
}
.right-pane {
position: fixed;
width: 50%;
height: 100%;
background: red;
top:0;
color: white;
margin-top: 40px;
}
</style>
<script src="http://www.fajrunt.org/js/jquery-1.9.1.min.js"></script>
<script src="http://www.fajrunt.org/js/jquery.mobile-1.3.1.js"></script>
<script src="http://www.fajrunt.org/js/iscroll.js"></script>
<script src="http://www.fajrunt.org/js/jquery.mobile.iscrollview.js"></script>
</head>
<body>
<div data-role="page" class="index-page">
<div data-role="header" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="header">
<h1>INDEX PAGE</h1>
</div>
<div data-role="content">
<div class="ui-grid-a">
<div class="ui-block-a" >
<div class="example-wrapper" data-iscroll>
<p>some content that will be scrolled</p>
<p>Some more content that will be scrolled</p>
<ul data-role="listview" id="iscroll-listview">
<li>Item 1</li>
<li>Item 2</li>
</ul>
<p>Even more content. It will scroll whatever is in the data-iscroll div.</p>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
<h1>Hello Cirrus.</h1>
</div>
</div>
<div class="ui-block-b">
<div class="right-pane">
This is a right pane.<br>
This is a right pane.<br>
This is a right pane.<br>
This is a right pane.<br>
This is a right pane.<br>
This is a right pane.<br>
This is a right pane.<br>
</div>
</div>
</div><!-- /grid-a -->
</div>
<div data-role="footer" data-position="fixed" data-tap-toggle="false" data-transition="none" data-id="footer">
<h1>My Footer</h1>
</div>
</div>
</body>
</html>
最后指出
如果您想了解更多关于iScroll + iScrollView的信息，以及它们如何与工作示例一起工作，请查看文章。