Always show character bus

Question

I use the niceScroll jQuery plugin to replace the usual browser scrollbar in <div>'s overflow. The plugin works well, but I cannot get it to work and always display the scroll rail (even if the content does not exceed the <div> border). My last configuration:

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

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

Any help would be appreciated, thanks

Answer 1

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

Setting autohidemode to false means that it does not disappear when the user stops scrolling, and then reappears while scrolling. Unfortunately, this does not mean that it is visible if the content is not full.

As a workaround, you can try making the element with id = ascrail2000 explicitly visible after your .niceScroll () call 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(); }); 

VIEW CONTINUOUS GUY IN THE LAST LINE

You may also need elements from its children:

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

(Make sure in your case the id of the ascrail2000 element.)

UPDATE: as stated in veritas, using the more general div[id^='ascrail'] selector instead of #ascrail2000 , it works on more than one nicescroll on one page, so the above can be done using JavaScript:

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

or in CSS:

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

or if the above does not 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 there is no way to select this behavior in the nicescroll plugin. Fortunately, nicescroll is open source and available on GitHub , so you can easily fork it and add this option or post a feature request on GitHub.

Answer 2

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

Answer 3

I assume that if the content does not overflow the bounding box, niceScroll does nothing, which may be your problem. Keep in mind that niceScroll is not> $ overflow: scroll; ... Without delving into the plugin itself, I cannot be sure, but I would assume that it has a built-in check to check if the contents need to be scrolled, and if it is not, then the function silently closes.

Answer 4

I see this answer with google search, even if it is old, this is my working solution, if someone sees this in search of an answer:

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

I need to set an arbitrary height in the div "bar", because the default height is: 0px, even if you show it, you don’t see anything. I believe that we can better calculate a good height with window sizes, but I don't need :)