Question

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",
                });
            })

Answer 1

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",
                    });
                }

            });