Always display niceScroll rail

问题

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

回答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.

回答2:

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

回答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.

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

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

来源：https://stackoverflow.com/questions/11628793/always-display-nicescroll-rail

标签

javascript

jquery

jquery-plugins

nicescroll