Nano Scrollbar

The documentation for the Nano Scrollbar Module is broken into relevant sections below. It is recommended that you follow the installation instructions as a first step.

Installation

If you are a seasoned Drupalista you can skip this section.

Installation of the Neat Scrollbar module can be done using the Drush command 'drush dl neat_scrollbar', followed by 'drush en neat_scrollbar'. This will prompt you to install the Libraries API module, if not already there. If you aren't using Drush from the command line, you can download the module from it's Project Page and move it into your 'sites/all/modules' folder, or through your Drupal site's modules administration section.

The main purpose of this section is to provide details of the relevant jQuery plugins and other files, which are required to be installed in the 'sites/all/libraries/neat_scrollbar' folder. If you don't have the libraries folders, you should create them and ensure that you give them the appropriate file/folder permissions.

Downloads

The mCustomScrollbar plugin is provided together with various other example files. It is recommended that you only download the files listed under "Installation" below. Conveniently, you can obtain all of the files required (including the Mouse Wheel jQuery Plugin) in the following repository folders:

Neat Scrollbar

The documentation for the Neat Scrollbar Module is broken into relevant sections below. It is recommended that you follow the installation instructions as a first step.

Create a simple scrolling website

It seems like scrolling websites, where all or most of the "pages" are stacked on the home page, are all the rage these days. Often this is accompanied by parallax scrolling effects - different elements scrolling at the same speed. The parallax effects are beyond the scope of this introductory article, but we will give you the secret recipe for creating a scrolling website.

Before you start

Get your basic setup in place:

  1. Install your Drupal instance
  2. Download, install, and enable the Chaos Tools, Views, and Views UI modules
  3. Download, install, and enable your favorite theme
  4. Go to /admin/config/system/site-information and fill out the site name and slogan (this will give you a nice header at the top of your home page)

Step 1: Set up some content

This is just to have something to work with. You can start with dummy content - FPO images and Lorem Ipsum - and then replace it with the real thing after you have everything working.

  1. Go to Content > Add Content > Article
  2. Fill in the Title and Body fields and upload an image - the specific content doesn't really matter
  3. Save
  4. Repeat three times - this will give you enough content to get the idea across

Step 2: Set up a View

This is where the magic happens.

Subscribe with RSS Subscribe to RSS - scrolling