jQuery Mobile 弹出窗口中的 Nicescroll

Question

我一直在我的 jQuery Mobile 应用程序中使用出色的 NiceScroll 插件。我遇到的一个问题是当我在弹出窗口中使用 NiceScroll 时。当用户按 Esc 键关闭弹出窗口时，滚动条仍留在后面。 “没问题”我想——我将只记录滚动条对象并从弹出窗口的 popupafterclose 事件中调用它的 .remove() 方法。但是，有一个问题 - 只要滚动条存在（即使在实际弹出窗口消失之后），popupafterclose 事件就不会被触发。 jQM 文档状态

当弹窗完全从屏幕上消失时触发此事件，这意味着所有关联的动画都已完成。

因此，我所看到的意味着悬空的孤立滚动条相当于“所有关联的动画”没有完整。

作为权宜之计，我在一个数组中跟踪创建的 Nicescrolls，检查文档级别的 Esc 键并在该数组的最后一个元素上调用 remove()。这可行，但感觉相当hackish。我将非常感谢任何能够提出更好方法的人。

Answer 1

我为你做了一个不会遇到这个问题的工作示例。

工作示例：http://jsfiddle.net/Gajotres/N28Vg/83/

HTML：

<div data-role="page" id="index">
    <div data-theme="b" data-role="header" data-position="fixed">
        <h1>Index page</h1>
    </div>

    <div data-role="content">
        <a href="#popupBasic" data-rel="popup" data-role="button" data-inline="true" data-transition="pop">Basic Popup</a>
        <div data-role="popup" id="popupBasic">
            <div class="header" data-role="header">
                <h1>Products</h1>
            </div>
            <div class="content" data-role="content">
                <ul data-role="listview">
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>                
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>
                    <li><a href="#">Some link</a></li>                
                </ul>                
            </div>
            <div class="footer" data-role="footer">
                <a class="close" href="#" data-rel="back" data-role="button">Close</a>
            </div>
        </div>                
    </div>

    <div data-theme="b" data-role="footer" data-position="fixed">
        <h1>Footer</h1>
    </div>    
</div>    

JavaScript：

使用这个：

$(document).on('pageshow', '#index', function(){ 
    $(".content").niceScroll({cursorcolor:"#00F"});
});

或者这个：

$(document).ready(
    function() {
        $(".content").niceScroll({cursorcolor:"#00F"});
    }
);