jQuery Mobile 独立滚动列表答案

【问题标题】：jQuery Mobile Independent scrolling listsjQuery Mobile 独立滚动列表
【发布时间】：2023-03-12 09:10:01
【问题描述】：

我正在使用 jQueryMobile 框架创建一个移动 Web 应用程序，该框架需要并排向用户显示 2 个列表。这里的问题是我想让列表彼此独立移动，以便用户可以从左侧列表中选择和项目，从右侧列表中选择另一个项目，而无需同时滚动两个列表。

我研究了以下手机插件：

asyraf9.github.com/jquery-mobile/

这是一个很好的解决方案，但它更以菜单/页面为中心，我希望将两个元素都作为单个页面中的列表。

我的想法是这样的：

<div class="ui-grid-a">
    <div class="ui-block-a" style="width:50%">
        <div class="ui-bar ui-bar-e" style="padding-left:5%;float:left;width: 100%; overflow: scroll;"> 
            <ul data-role="listview">
                <li><a href="a.html">Example A</a></li>
                <li><a href="b.html">Example B</a></li>
                <li><a href="c.html">Example C</a></li>
                <li><a href="d.html">Example D</a></li>
            </ul>                                                                                           
        </div>
    </div>
    <div class="ui-block-b" style="width:50%">
        <div class="ui-bar ui-bar-b" style=" z-index: 10;position: absolute;width: 100%;padding-right: 5%; overflow: scroll;">
            <ul data-role="listview">
                <li><a href="a.html">Example A</a></li>
                <li><a href="b.html">Example B</a></li>
                <li><a href="c.html">Example C</a></li>
                <li><a href="d.html">Example D</a></li>
            </ul>                                                                                           
        </div>
    </div>
</div>

还有其他人想出可行的解决方案吗？

谢谢

【问题讨论】：

感兴趣。有什么解决方案吗？

标签： jquery html user-interface jquery-mobile

【解决方案1】：

看看iScoll 4;它可能不是 jQuery，但它是一个很棒的移动滚动 JavaScript 插件。

您可以为每个 UL 添加一个 ID，并分别为每个 UL 添加一个滚动条，如下所示：

以你的例子，你会是这样的：

<script type="application/javascript" src="iscroll.js"></script>
<script type="text/javascript">
    var scroller_1;
    var scroller_2;
    function loaded() {
        scroller_1 = new iScroll('ul-1');
        scroller_2 = new iScroll('ul-2');
    }
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>

我希望这会有所帮助！

【讨论】：

感谢 dSquared！我对实现进行了尝试，但不仅添加了一个滚动条，而且 UI 变得非常缓慢。绝对是一个解决方案，但对于我的目的来说不是一个可用的解决方案。

【解决方案2】：

JqueryMobile 路线图 http://jquerymobile.com/roadmap/ 表示独立 scolling 应该在 1.7 版本中出现

作为 hack 解决方法，通过 iframe 添加 div 可能会提供笨拙的解决方案。

【讨论】：