1

I am trying to use the JQuery custom scroll-bar script discussed here on my jekyll powered Github site. I would like to it use for scrolling code blocks in each page such that for each code block there is a horizontal or vertical (or both) scroll bar if there is an overflow. However, the heights of different code blocks vary and so the plugin has to work with CSS property max-height: nPx rather than height: nPx.

The problem is that if I define only max-height: nPx without the height: nPx property (which I dont want since I want height to be auto/to vary with content), then the entire code block collapses such that the scrollbars disappear altogether, along with the content.

Here is a minimal reproducible example on Jsfiddle with only the max-height defined. Setting height: nPx makes the content and scrollbars work okay: except this is not an option: in my case, height must be auto.

I have looked at the author's example on using the plugin with max-height in the provided archive but in the max-height.html example, mCustomScrollbar is not called manually as I am doing in my example so I cant just "copy-paste" from the example.

What could I be missing here?

SnoringFrog
  • 1,479
  • 1
  • 16
  • 30
shekeine
  • 1,445
  • 10
  • 22
  • I can say more: if you set `height:100px` scrollbars will be positioned and work incorrectly. I've tried several ways with `height:auto` and even `min-height` property - nothing works, the same for latest 3.0.5 version. Maybe better to try [jQuery Scrollbar](https://github.com/gromo/jquery.scrollbar/) plugin? – Gromo Oct 28 '14 at 08:16
  • Am sure Malihu worked hard on it, but this is a major limitation. Its hard for me to think of a site where all div heights are equal! Checking out your suggestion, thanks. – shekeine Oct 28 '14 at 08:49
  • @Gromo, no luck.. The "jQuery Scrollbar" plugin breaks even worse, am abandoning this for now until someone answers my question someday.. – shekeine Oct 28 '14 at 20:53

1 Answers1

0

You can try jQuery Scrollbar. I've updated your jsFiddle example - look here. Just included styles and scrollbar from github.io and apply it to your container when document is ready.

Do not forget to add class for scrollbar - scrollbar is fully customizable through CSS classes. List of ready-to-use classes available on basic demo page. In your example I've used class scrollbar-light with background-color modification:

.scrollbar-light > .scroll-element {
    background-color: yellow;
}
Gromo
  • 1,609
  • 1
  • 13
  • 14