如何在 jQuery Mobile 1.3 中实现可滚动的内容窗格答案

【问题标题】：How to realize a scrollable content pane in jQuery Mobile 1.3如何在 jQuery Mobile 1.3 中实现可滚动的内容窗格
【发布时间】：2013-05-11 02:57:49
【问题描述】：

我使用网格来模拟某种拆分视图，我想使用左侧和列表视图一起显示一些导航按钮，右侧显示一些内容。

现在列表视图真的很长，我想让它可以滚动。因此列表视图窗格应该是可滚动的，而内容窗格保持全屏高度（或稍后获得自己的可滚动内容窗格）。 jQM怎么可能呢？谢谢！

【问题讨论】：

标签： jquery css jquery-mobile iscrollview jquery-mobile-panel

【解决方案1】：

解决方案

你想要的不是那么容易做到的。无论您在什么平台上工作，几乎不可能创建 2 个可滚动窗格并且每个窗格都单独工作，特别是在移动设备上。但与往常一样，有一种解决方法。

工作示例：http://example.gajotres.net/iscrollview/

我无法为您创建一个 jsFiddle，因为 iscrollview 在那种环境中不起作用。如果你还不知道，iscrollview 是 jQuery 移动插件，它作为 iscroll 的包装器创建。 Iscroll 是为移动浏览器提供可滚动内容的插件。

此实现使用固定浮动右面板。虽然页面的其余部分是可滚动的，但此面板会给您一种错觉，就像它固定在页面的右侧一样。

测试于

Windows 火狐
Windows Chrome
Android Chrome
堆栈三星 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 的更多信息，以及它们如何处理工作示例，请查看此 article。

【讨论】：

很好的答案，谢谢！是的，我也偶然发现了 iscrollview。但是必须使用 iscrollview 吗？将右窗格设置为固定位置还不够吗？顺便说一句：在 jsbin 上它的工作：jsbin.com/oqarih/2
从您的标签中，我了解到您在 iPad（或其他移动设备）上需要这个。如果这是真的，那么您需要 iscrollview 用于大型列表视图。桌面浏览器不需要iscrollview，因为它们不会像触摸设备那样遇到触摸问题。最后一件事，如果您只是为 iOS 设备构建应用程序，那么有一个不需要 iscrollview 的解决方案，但不幸的是它只适用于 iOS 设备。
我需要移动和桌面设备，我喜欢这个解决方案。但是必须解决一些问题：列表视图不应该有滚动条，或者滚动条需要直接显示在左窗格内的滚动列表的右侧，而不是右窗格的右侧。这可能吗？
基本上没有，这是一个复杂的问题。在桌面浏览器上，您可以创建一个仅在左窗格中具有自定义滚动条的解决方案。但与此同时，这在移动设备上是不可能的。在移动设备上，如果没有 iscrollview，您将无法滚动大型列表视图，并且相同的 iscrollview 将触发浏览器右侧的经典浏览器滚动条。
该死的。最简单的功能请求会产生最大的问题......使用最初打开的滑动面板作为侧边栏怎么样？而不是网格解决方案。