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

Lakh

Answer 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.

Laser

Thanks but i was a typo in my question :/ I cannot set hardcoded #ascrail... value in javascript (or CSS) because i can have n scrolls on page. But +1 for the effort and partly good answer. – Lakh

CSS selector div[id^='ascrail'] { display:block; } is a CSS solution for this problem but I would prefer something else. – Lakh

@veritas: I'm afraid there is currently no better solution but you can always post a feature request to make it easier - see my updated answer. – Laser

I need to show the scroll bar always. now it shows only in mouse-over. Anybody can help me on this. – Gusti

Answer 2

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

Tarsus

Answer 3

I am assuming that if the content does not overflow the bounding box, niceScroll does not do anything, which might be your problem. Keep in mind that niceScroll isn't >$overflow: scroll;... Without digging through the plugin itself I can't be certain but I would assume it has a check built-in to test whether the content needs scrolling, and if it doesn't, then the function silently exits.

Changeless

The plugin is creating scroll divs in DOM and setting their value to display:none; so it does work. – Lakh

Answer 4

I see this answer with a google search, even if it's old, this is my working solution if someone see this seeking for an answer :

        $('#ascrail2000.nicescroll-rails').show();
        $('#ascrail2000.nicescroll-rails div').height('300px').show();

I need to set an arbitrary height to the "bar" div, because by default it's height:0px, even if you display it, you can't see anything. I suppose we can do better an calculate a good height with the windows dimensions, but I don't need to :)

Rockbottom

Answer 5

Right now 07/02/2018 and working Version jquery.nicescroll v3.7.6 Source Link

After adding autohidemode: false it's working fine for me.

$("#example").niceScroll({
   autohidemode: false       // it make nicescroll scroll bar visible all time
});

Shirt