Search code examples
javascriptjqueryhtmljquery-pluginsnicescroll

jQuery niceScroll Not Working Along w/ .load()


I'm implementing the jQuery plugin niceScroll in my DIV's. It works beautifully except when I add an .load() function to a tag that is using niceScroll, no scrolling works. But if I remove niceScroll, then the native scroller works fine...?

This is targeting a webKit browser. Any Ideas or am I being a goof in my code?

$(document).ready(
            function(e) {

                $("#west").load('http://mySite.comregulatory_list.php', '', function(response, status, xhr) {
                    if (status == 'error') {
                        var msg = "Sorry but there was an error: ";
                        $(".content").html(msg + xhr.status + " " + xhr.statusText);
                    }

                });

                $("#west").niceScroll({
                    cursorcolor : "#6699FF",
                    cursorwidth : "2px",
                    grabcursorenabled : "false",
                    preservenativescrolling : "false",
                    cursorborder : "0px",
                    scrollspeed : "20",
                });
            })

Solution

  • The niceScroll plugin is almost certainly updating the HTML structure of the #west element, so you should either target the specific content-container within the #west element or re-initialize the niceScroll plugin when you load the new content:

                $("#west").load('http://mySite.comregulatory_list.php', '', function(response, status, xhr) {
                    if (status == 'error') {
                        var msg = "Sorry but there was an error: ";
                        $(".content").html(msg + xhr.status + " " + xhr.statusText);
                    } else {
                        $(this).niceScroll({
                            cursorcolor : "#6699FF",
                            cursorwidth : "2px",
                            grabcursorenabled : "false",
                            preservenativescrolling : "false",
                            cursorborder : "0px",
                            scrollspeed : "20",
                        });
                    }
    
                });