0

I have been putting together a site for a project I've been working on lately translating the bible, primarily using Bootstrap 3. For reference, the site is www.jbtbible.com.

I added in NiceScroll to get nicer looking scrollbars as well as smoother scrolling on mobile devices.

It seems to work fine where I use it in my reading panes, but when I try to use it in my dropdown lists, it seems like it's overriding the max-height setting in my css, and then giving me no scrollbar at all in the dropdown.

I am trying to do this using this line in jquery from my function that loads the header of the pane:

$("#pane" + readingPane.paneNumber).find(".dropdown-menu").niceScroll({cursorcolor:"#999"});

I also tried calling this on the button which produces the dropdown, and it does nothing (as expected).

So how can I get it to apply the scrollbar formatting and smooth scrolling within the dropdown as well?

And if there's a better way to handle the scrollbars than using NiceScroll, I'm fully open to that as well.

Belizzle
  • 1,295
  • 3
  • 13
  • 28
  • 1
    https://github.com/inuyaksa/jquery.nicescroll/issues -- theres's many issues. One is that it doesn't work on mobile devices consistently and at orientation changes. Best not to over-ride native stuff. One of the core principles of Boostrap is not to restyle native stuff with a script. People using phones, etc, already know to scroll a long page since everything is long on a skinny device. – Christina Nov 27 '13 at 20:14
  • If I want to get consistent scroll bars across browsers though, is there any way to achieve that other than scripting it? – Belizzle Dec 03 '13 at 14:33
  • No. And scripts are not for many native functions. You can see from the issues in the script. – Christina Dec 03 '13 at 15:38
  • Without scripting it then, there's no way to maintain a consistent UX across browsers... – Belizzle Dec 03 '13 at 15:52

0 Answers0