fleXcroll V2.1.1 Basic Usage Guide -update:03.02.2013

Setting up fleXcroll

  1. flexcroll.js has to be included in the head element of the html document.
    • <script type='text/javascript' src="flexcroll.js"></script>
  2. Styles relating to your custom scrollbars should be added inside a CSS file.
    • fleXcroll won't work without proper CSS that styles its scrollbars.
    • Minimum required CSS for fleXcroll to run, without the need of any images, can be seen in variations-howto's/minimal in the fleXcroll example archive that can be downloaded from fleXcroll page.
  3. fleXcroll only works with the HTML element div
  4. You should style your target div to overflow: auto;
  5. height: auto; style is not currently supported. Percentage heights directly applied on the fleXcroll target div may not work correctly on some browsers.

Applying fleXcroll to your div

Automatic starting on page load

Fast Automatic Starting

Manual starting

Styling your scroll bars

Automatically generated scrollbars (recommended)

fleXcroll creates necessary div elements for scrollbars on-the-fly, you just need to style those scrollbars for them to be visible. For styling, fleXcroll gives class names to these dynamically generated divs. Vertical boxes on the left stands for the vertical scroller, and horizontal boxes on the left stands for the horizontal scroller. The scrollbars are under the fleXcroll-applied div in the DOM tree.

Hover to see the class names associated with the scrollers

Version 2.0.0

Version 2.1.1 (New styling method)

fleXcroll 2.1.1 provides new elements in the middle to make it easier to style alpha transparent scrollbars, and also makes it easier to put images in the middle of the scrollbase and scrollbar. These middle objects are only activated when basebeg, barbeg elements have a forced size (using !important CSS styles). This way, compatibility with older styles are preserved.

External scrollbars

As of version 2.0, fleXcroll supports external scrollbars, that is, scrollbars that are structured in the html of the document. For this, please see the fleXcroll example archive on the fleXcroll page.

CSS tricks

Arrows

You can place your arrow images inside .vscrollerbasebeg, .vscrollerbaseend, .hscrollerbasebeg, .hscrollerbaseend. However, you'll see that the scrollbars overlap these areas.

To remedy this, you'll apply paddings on the scrollbars. These paddings are not used for styling the scrollbars but will be used to know how much scrollbars will be padded against the scrolltrack, and will be set to 0 once they are read by fleXcroll.

The top padding provides space for top arrow, the left padding provieds space for left arrow, and so on. They can be set individually.

Fixed size scrollbars

If you don't want the scrollbar size to be set automatically, for example, if you want the scrollbar to be 100px big, you can set it to a fixed size using the following trick:

Always display scrollbase (scroll-track)

If you want to keep the scroll-track visible whether there's enough content to warrant a scrollbar or not, you can use the following trick:

Put the vertical scrollbar on the left-side

fleXcroll and printing

You can allow printing of fleXcroll content by adding the following CSS rules:

fleXcroll and embedding flash content

Firefox has a bug with embedded flash content, where the embed is still displayed in overflowed portions of the content. To remedy this problem, use of <embed> tag should be avoided, you should use <object> instead. To see how to do this, please see how to remove the embed tag (link to external webpage). If there are still problems, after removing the embeds as mentioned in the article, add the following param: <param name="wmode" value="transparent" />

Programming with fleXcroll

You don't need any javascript knowledge to get the basic custom scrollbar functionality, but if you are programming web applications, fleXcroll provides several useful methods for your Javascript needs. You could even program a news-ticker, for example (but you don't need to, as fleXcroll comes with a news-ticker module as a programming example).

Please see the programming guide for fleXcroll if you need any additional fleXcroll functionality.

Back to fleXcroll page