Download
This module hides default scrollbars and replaces them with autohiding, simpler scrollbars, like those found in OSx.
An element can be made scrollable by passing it as a perameter to the Scroll function { Scroll($('#mydiv')) }
The Scroll function makes an object, so it is best to store this as a variable { myscroll = new Scroll($('#mydiv')) }
Content can be added to the Scroll by either:
- Using .Add() to return the content element { myscroll.Add().html('my html') }
- Accessing the content element through { myscroll.eDict.content }
- Finding the content element within the original element { $('#mydiv').find('.content') }
When the content is changed, the Scroll will be updated, this can also be done manually with { myscroll.Update() }
The Scroll will only show scrollbars for the overflowing dimensions. See the examples.
Example Code:
myscroll1 = new Scroll($('#scroll1'))
myscroll1.Add().html(
"This element is bigger in both height and width
"
)
myscroll2 = new Scroll($('#scroll2'))
myscroll2.Add().html(
"This one is bigger in width only.
"
)
myscroll3 = new Scroll($('#scroll3'))
myscroll3.Add().html(
"Whereas this element is too tall.
"
)
myscroll4 = new Scroll($('#scroll4'))
myscroll4.Add().html(
"And this element is the same size as its parent
"
)