Welcome to the scrollview object documentation!
In this scrollview example you will find some sort of documentation about the scrollview object. This example has been built using scrollviews too, so you'll find some examples explained by the guide itself and in its source code.
Overview
Mainly, the scrollview library will help you on creating scrollview-styled objects on your web page starting from two nested DIVs: one for the container, with the shown size and position, and another one for the content, with the same size of the full content you want to show.
CSS Classes
You can customize roles and functions of different parts of a scrollview adding a particular class name to DOM elements. The specified classnames are checked when the page is loaded (i.e. onload) so are very helpful for making the HTML code clean whe you don't have any particular javascript function for your page.
The simpliest scrollview is created in commonly in this way:
<div class='scrollview-container'><div class='scrollview-content'></div></div>
but changing attributes to the scrollview-container element or giving them more class names, is possible to personalize the default behaviour in many ways.
Container Attributes
Once you've created your scrollview you can change its behaviour setting attributes to the container, like this:
<div class='scrollview-container' scrollviewmode='strip' ><div class='scrollview-content'></div></div>
There are many attributes to play with. Moreover, you can add more scrollview-item DIVs to the scrollview-content for making scrolling strips, tables and for reproducing many other scenarios.
<div class='scrollview-container' scrollviewmode='strip' ><div class='scrollview-content'><div class='scrollview-item'>item1</div><div class='scrollview-item'>item2</div></div></div>
How items are handled is defined by container attributes too.
Events
Aside to the classic javascript events, some more events are triggered when using scrollviews, like the onstartdragging event, that is triggered whe user drags a scrollview to any direction. Events are assigned to the scrollview in the usual ways:
<div class='scrollview-container' onstartdrag='code'>
Or:
scrollviewelement.onstartdrag= function(){code}
Methods
You can change the classic scrollview behaviour calling methods on the container object. Once you've the object you need using, for example, the getElementById method...
<div class='scrollview-container' id='foo'>
...
<script>
var container=document.getElementById('foo');
...you can interact with that scrollview changing its attributes with container.setAttribute(name,value) like with other DOM elements or with the special methods explained below.
Static methods
The scrollview object can be used not only for creating new scrollviews by code with scrollview.create but offers a bunch of utility functions that can be helpful for some common tasks.