Always display niceScroll rail

Question

I'm using niceScroll jQuery plugin to replace common browser scrollbars in overflowing <div>'s. The plugin is working good, but I can't get it to work and display the scroll rail always (even if the content is not exceeding <div> bounds). My final configuration is:

$(document).ready(function () {
    $(".div-wrapper").niceScroll({
        cursorcolor: "#333",
        cursoropacitymin: 0.3,
        background: "#bbb",
        cursorborder: "0",
        autohidemode: false,
        cursorminheight: 30
    });
};

I've tried to fire $(".div-wrapper").getNiceScroll().show() but it doesn't seem to work either.

Any help would be appreciated, thanks

Solution 1

First of all, you have a missing parenthesis at the end - could that be your problem?

Setting autohidemode to false only means that it doesn't disappear when the user stops scrolling and then appear again while scrolling. Unfortunately it doesn't mean it's visible if the content doesn't overflow.

As a workaround you may try making the element with id=ascrail2000 explicitly visible after your call to .niceScroll() with something like this:

$(document).ready(function () {
    $(".div-wrapper").niceScroll({
        cursorcolor: "#333",
        cursoropacitymin: 0.3,
        background: "#bbb",
        cursorborder: "0",
        autohidemode: false,
        cursorminheight: 30
    });
    $('#ascrail2000').show();
});

SEE THE MISSING PAREN IN THE LAST LINE

You may need to make its children elements visible as well:

    $('#ascrail2000 *').show();

(Make sure that the element's id is ascrail2000 in your case.)

UPDATE: as veritas has pointed out, using a more general selector div[id^='ascrail'] instead of #ascrail2000 makes it work for more than one nicescroll on one page, so the above can be done with JavaScript:

    $("div[id^='ascrail']").show();

or in CSS:

    div[id^='ascrail'] { display: block; }

or if the above doesn't work:

    div[id^='ascrail'] { display: block !important; }

This is not the most elegant solution but I'm afraid this is currently the only way to solve this problem because the nicescroll plugin doesn't have an option to select that behaviour. Fortunately nicescroll is open source and available on GitHub so one could easily fork it and add such an option or post a feature request on GitHub.

Solution 2

$(".div-wrapper").niceScroll({
    cursorcolor: "#333",
    cursoropacitymin: 0.3,
    background: "#bbb",
    cursorborder: "0",
    autohidemode: false,
    cursorminheight: 30
});