Applying Scrollbars to Site-Wide Content

The Nano 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 .nano-scrollbar and .nano-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. CSS Attributes section is provided.

• 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 {
  position : relative;
  width    : 100%;
  height: 400px;
  overflow : hidden;
}
.custom-drupal-content-class > .content {
  position      : absolute;
  overflow      : scroll;
  overflow-x    : hidden;
  top           : 0;
  right         : 0;
  bottom        : 0;
  left          : 0;
}
.custom-drupal-content-class > .content:focus {
  outline: thin dotted;
}
.custom-drupal-content-class > .content::-webkit-scrollbar {
  visibility: hidden;
}
.has-scrollbar > .content::-webkit-scrollbar {
  visibility: visible;
}
.custom-drupal-content-class > .nano-pane {
  background : rgba(0,0,0,.25);
  position   : absolute;
  width      : 10px;
  right      : 0;
  top        : 0;
  bottom     : 0;
  visibility : hidden\9; /* Target only IE7 and IE8 with this hack */
  opacity    : .01;
  -webkit-transition    : .2s;
  -moz-transition       : .2s;
  -o-transition         : .2s;
  transition            : .2s;
  -moz-border-radius    : 5px;
  -webkit-border-radius : 5px;
  border-radius         : 5px;
}
.custom-drupal-content-class > .nano-pane > .nano-slider {
  background: #444;
  background: rgba(0,0,0,.5);
  position              : relative;
  margin                : 0 1px;
  -moz-border-radius    : 3px;
  -webkit-border-radius : 3px;
  border-radius         : 3px;
}
.custom-drupal-content-class:hover > .nano-pane, .nano-pane.active, .nano-pane.flashed {
  visibility : visible\9; /* Target only IE7 and IE8 with this hack */
  opacity    : 0.99;
}

HTML structure should be in below format

<div class='custom-drupal-content-class'>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.Lorem Ipsum is simply dummy text of the printing and typesetting industry. 

Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</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 nanoScroller 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.

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