Last updated September 28, 2013. Created by davidmac on September 28, 2013.
Log in to edit this page.

Applying Scrollbars to Site-Wide Content

The Neat Scrollbar module comes with the option to apply vertical scrollbars to side-wide content such as all nodes or all blocks. You will find the configuration options under the User Interface section of the Drupal administration menu.

If site-wide options are selected, the module will apply vertical scrollbars to all nodes or all blocks, or both. The idea behind this option was to make it as easy as possible to get started and it is an appropriate choice for those who are happy to have scrollbars of consistent height throughout their website. In this case a height of 400px will be applied to the vertical scrollbar themed content. The classes .neat-scrollbar and .neat-scrollbar-blocks are used with these options and may be overridden using your theme's CSS style-sheet, if required.

  • Custom CSS Attributes

If you only require scrollbars on individual blocks or pieces of content, then it is a straightforward process of isolating the CSS ID or Class for that piece of content, and inputting it under the Options & Settings for this module. Two sections are provided, one for vertical scrollbars, the other for horizontal scrollbars.

  • Don't Forget

When applying Scrollbars to custom CSS attributes don't forget to include the appropriate CSS in your theme's style-sheet, as shown in the following example:

/* Vertical */
.custom-drupal-content-class {
  height: 400px;
  overflow: hidden;
}
/* Horizontal */
#custom-drupal-content-ID-outerdiv {  // apply scrollbar to this class
  overflow: hidden;
}
#inner-div {
width: 1200px;  // should be wider than outer div
}

With custom CSS attributes, the sizing of your content and, as a result, the scrollbars, is up to you. However, if the actual height or width of your content is less than that specified in your style-sheet, the scrollbar will not show.

You may find, from reading the about the mCustomScrollbar jQuery Plugin, that you can set the overflow style as 'overflow: hidden;' or 'overflow: auto;', however using 'overflow: auto' may lead to a 'doubling up' with the browser's scrollbar, under some set-ups.

Developers wishing to use their own custom scripts and style-sheets can switch off this module's settings if they want to continue to use the libraries as loaded.

  • Themes

Out of the box, there is a choice between eight different scrollbar themes providing scrollbars of varying thickness from dark to light. Arrows can be changed for chevrons, by changing theme, or they can be switched off altogether. Some light scrollbar themes may not show on very light backgrounds and vice-versa for dark themes and backgrounds.

Where possible, a reasonable explanation of each option is included under the Options & Settings section of this module.

Looking for support? Visit the Drupal.org forums, or join #drupal-support in IRC.