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

rsp · Accepted Answer · 2012-07-25T09:34:12.827

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.

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. — veritas, Jul 24 '12 at 16:35
CSS selector `div[id^='ascrail'] { display:block; }` is a CSS solution for this problem but I would prefer something else. — veritas, Jul 24 '12 at 16:36
@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. — rsp, Jul 25 '12 at 09:36
I need to show the scroll bar always. now it shows only in mouse-over. Anybody can help me on this. — Razack, Nov 03 '14 at 06:38

score 6 · Answer 2 · edited Feb 04 '16 at 14:55

6

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

edited Feb 04 '16 at 14:55

HasanG

12,734
29
100
154

answered Nov 02 '12 at 16:12

Ramesh

1,829
2
25
30

score 0 · Answer 3 · answered Jul 24 '12 at 10:53

0

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.

answered Jul 24 '12 at 10:53

djeglin

273
2
10

The plugin is creating scroll `divs` in DOM and setting their value to `display:none;` so it does work. – veritas Jul 24 '12 at 11:02

score 0 · Answer 4 · answered Feb 07 '17 at 15:04

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 :)

score 0 · Answer 5 · answered Jul 02 '18 at 15:30

0

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

answered Jul 02 '18 at 15:30

MD Ashik

9,117
10
52
59

Always display niceScroll rail

5 Answers5

Linked