Question

我一直在jQuery Mobile应用程序中使用优秀的NiceScroll插件。我遇到的一个问题是我在弹出窗口中使用NiceScroll。当用户点击Esc键以关闭弹出窗口时，滚动条会保留在后面。＆＃34;没问题＆＃34;我想 - 我只是记录滚动条对象并从popupafterclose事件中为弹出窗口调用它的.remove（）方法。但是，存在一个问题 - 只要滚动条存在（即使实际弹出窗口消失后），popupafterclose事件也不会被触发。 jQM docs状态

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

所以我所看到的意味着挂起的孤立滚动条相当于＆＃34;所有相关的动画＆＃34; 没有完成。

作为一种停止间隙解决方案，我在数组中跟踪创建的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"});
    }
);

Nicescroll in jQuery Mobile弹出窗口

1 个答案:

HTML：

的JavaScript：