Question

I am using a custom scroll bar library for jQuery called JS Scrollpane, however it has unexpected results when trying to apply a scroller to a DIV that already has a scroller. So what I want to check is if the class “.jspScrollable” has been applied and if so, don’t apply the scroller. Simple enough, right?

The class “.jspScrollable” is dynamically added by the script and it seems as though that jQuery’s hasClass method is static as opposed to dynamic, so it’s not seeing that a new class has been added. Is there a way I can check when a dynamic class has been added to an element?

Don’t mind the pageEls.bigcol lines. That’s just a little object I store all of my selectors in to optimise my code as the site currently has around 4000 lines of JS or so.

Here’s my code thus far:

function initScrollers()
{
    pageEls.bigcol = $(".bigcol").filter(':visible');

    var settings = {
        animateScroll: true,
        autoReinitialise: true,
        hideFocus: true,
        verticalGutter: 15
    };

    if ( pageEls.bigcol.length && !pageEls.bigcol.hasClass('noScroller') ) 
    {
        if ( !pageEls.bigcol.hasClass('.jspScrollable') )
        {
            if (pageEls.bigcol.height() > 290)
            {
                pageEls.bigcol.jScrollPane(settings);
            }
        }
    }
}

Answer 1

You don’t need the . in the hasClass method argument.

Change:

 if ( !pageEls.bigcol.hasClass('.jspScrollable') )

to

 if ( !pageEls.bigcol.hasClass('jspScrollable') )