Nicescroll in jQuery Mobile popups

I have been using the excellent NiceScroll plugin in my jQuery Mobile application. The one issue I have run into is when I use NiceScroll in a popup. When the user hits the Esc key to dismiss the popup the scrollbar remains behind. "Not a problem" I thought - I'll just record the scrollbar object and call its .remove() method from the popupafterclose event for the popup. However, there is an issue - the popupafterclose event does not get triggered for so long as the scrollbar is present (even after the actual popup has disappeared). The jQM docs state

This event is triggered when the popup has completely disappeared from the screen, meaning that all associated animations have completed.

So what I am seeing implies that the orphaned scrollbar that hangs around is equivalent to "all associated animations" not being complete.

As a stop gap solution I am keeping track of created Nicescrolls in an array, checking the Esc key at document level and calling remove() on the last element of that array. This works but feels rather hackish. I would be much obliged to anyone who might be able to suggest a better way.

Solution

I made you a working example that don't suffer from this problem.

Working example: 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:

Use this:

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

or this:

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