Scroll Panel

NOTE: Scroll Panels are only supported on BlackBerry 10 and PlayBook

Scroll panels allow you to specify an panel on your screen where the contents of the panel will scroll. This is typically used in creating either a master/detail style view (as seen in the picture above) or for creating fixed areas on your screen that have scrollable areas.

A scrolling panel is a <div> with a data-bb-type="scroll-panel" attribute. NOTE: In order for content to scroll in the panel, it must have a specified height. Otherwise the panel will grow to the size of its inner content

    <div data-bb-type="scroll-panel" style="height:450px">
           <!-- Some content -->
    </div>

JavaScript Interface

If you have manipulated the content of the scrolling panel via JavaScript you will want to call refresh() so that it can recalculate its scrolling dimentions

    document.getElementById('myScrollingPanel').refresh();

You can also scroll to a specific x,y coordinate by using the scrollTo() function. It takes both an x and y coordinate as well as an optional time parameter in milliseconds to animate the scroll. If no animation is desired then time should be omitted or specified as 0.

    document.getElementById('myScrollingPanel').scrollTo(0,100,250);

If you want to scroll relative to the current scroll position (i.e. scroll 10 pixels down) then you can specify true for the relative parameter.

    document.getElementById('myScrollingPanel').scrollTo(0, 10, 20, true);    

If you have an element in the scrolling panel that you would like to scroll to, you can use the scrollToElement() function. This function takes in the element to scroll to and an optional time parameter for how long you want the animation to last.

    var element = document.getElementById('myitem');
    document.getElementById('myScrollingPanel').scrollToElement(element, 100);    

Changes for v0.9.4

NOTE: The following changes are currently in the "next" branch and will be part of v0.9.4

JavaScript Interface

Scroll panels now support an onscroll event. If you want to know when the user is scrolling the panel content you can assign a handler to the onscroll event

<div data-bb-type="scroll-panel" onscroll="doSomething()">
...
</div>

If you have manipulated the content of the scrolling panel via JavaScript you will want to call refresh() so that it can recalculate its scrolling dimensions. NOTE: This is only necessary for PlayBook

    document.getElementById('myScrollingPanel').refresh();

You can also scroll to a specific x,y coordinate by using the scrollTo() function. It takes both an x and y coordinate. The y coordinate is for future use, but currently isn't implemented.

    document.getElementById('myScrollingPanel').scrollTo(100,0);

If you have an element in the scrolling panel that you would like to scroll to, you can use the scrollToElement() function. This function takes in the element to scroll to.

    var element = document.getElementById('myitem');
    document.getElementById('myScrollingPanel').scrollToElement(element);