Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Scrollbar II

This extension allows you to add advanced custom scrollbars that fit your design scheme.
It can be used for pages, layers, texts, etc...
Cross-browser and backward compatible.

Some features:

- Horizontal and vertical support.
- Draggable track for fast scrolling.
- Clickable trackbase for fast pointing.
- Full keyboard support.
- Mousewheel and touch-screen support.
- Standard and cyclic scroll.
- Complex content support (like nested/hidden/visible layers).
- Multiple objects can belong to the same instance sharing the same customization.
- Multiple instances for different objects customization within the same page.
- RTL support.
- Wide set of custom styles.
- Smooth effect with custom inertia and timing.
- Custom styles.
- No jQuery required nor extra libraries or dependencies.

...and more!

HTML 4.01 Transitional
W3C compliant


* Just a brief about some of the changes that were made lately...

* New in version 2.0.3

- Improved mouse wheel support on Vivaldi browser.

* New in version 2.0.2

- Exception list; allows to exclude specific device/s from the extension and let the platform/device handle the scrollbar natively.

* New in version 2.0.1

- Improved navigavility with [alt]-[left] and [alt]-[right] keys.
- Excluded element/s list (under 'Advanced' category); specifies the object/s that will be excluded from the holder actions
  (useful for [rz] Styled gMaps, Google Maps and similar elements).
- Fixed a minor issue with "hard-coded" events.

* New in version 2.0

- This version replaces its predecessor; [rz] Scrollbar 1.x has been deprecated and removed and is not supported.
- Requires wb10 or later.

How to use?

1. Design your page and/or layers as you usually do.
2. Add the custom scrollbar extension to your page.
3. Optionally, setup the appearance of the scrollbar that best fits your design scheme.
4. Preview or publish.

Due to technical reasons, IE5 is not supported and in IE7 in RTL mode the scrollbar in the body is not shown; in both cases, the extension manages the fallback to the standard mode.


[rz] Scrollbar II (ifr-cnt)

This utility extends the [rz] Scrollbar II functionality and it has been designed to handle inline frames content seamlessly.
The main extension has many workarounds to bypass browsers limitations and their different implementations; however, the "seamless" iframe object (also) usually behaves different accross browsers and may interfere with the ancestor scrollbar on some browsers.
In the case you need the custom scrollbar within the iframe, you just drag and drop the [rz] Scrollbar II instance and this is enough; but for a simpler and lightweight implementation -iframe without scrollbars which its content is not longer than the container- you just drag and drop a [rz] Scrollbar II (ifr-cnt) instance.
If the iframe content is dynamic, means that sometimes it may be longer than the container, you can have both [rz] Scrollbar II and [rz] Scrollbar II (ifr-cnt) instances in the same (embedded) page.
You do not need to setup any property, all is done for you (optionally, the extension can prevent the sub-page to be opened as a standalone page and redirects it to -usually- its container -or a different one-).

How to use?

- Static content, no scrollbar:

1. Open the sub-page.
2. Drag and drop a [rz] Scrollbar II (ifr-cnt) instance.

Note: In that case, the iframe must be the same size or greater than the sub-page contents so as the iframe object won't take the scrolling control.

- Static content, scrollbar:

1. Open the sub-page.
2. Drag and drop a [rz] Scrollbar II instance.

- Dynamic content:

1. Open the sub-page.
2. Drag and drop a [rz] Scrollbar II instance.
3. Drag and drop a [rz] Scrollbar II (ifr-cnt) instance.

Technical notes:

- Some browsers may not allow to preview locally this extended functionality; you must publish your page.
- The content cannot be cross-origin; both container and contents must belong to the same domain.

w3c compliant
© 2012-20 by MAGNA web studio • all rights reserved

new shop with