dojox/mobile/ScrollablePane

Authors: Yoshiroh Kamiyama
Developers:Yoshiroh Kamiyama
since:V1.8

Introduction

The dojox/mobile/ScrollablePane widget is a pane that has the touch-scrolling capability. Unlike dojox/mobile/ScrollableView, ScrollablePane is not a view. ScrollablePane can be placed in a view to create a partial scrolling area.

ScrollablePane.png

Constructor Parameters

Parameter Type Default Description
roundCornerMask Boolean false If true, create a rounded corner mask to clip corners of a child widget or dom node. Works only on WebKit-based browsers.
radius Number 0 Radius of the rounded corner mask.
height String "" Explicitly specified height of the widget (ex. "300px"). If "inherit" is specified, the height is inherited from its offset parent (see Inheriting height from a parent div). If "auto" is specified, the content height, which could be smaller than the entire screen height, is used. If nothing is specified, the entire screen height is used.

Examples

Declarative example

require([
  "dojox/mobile",
  "dojox/mobile/parser",
  "dojox/mobile/ScrollablePane"
]);
<div data-dojo-type="dojox/mobile/View" style="height:100px">
  <div data-dojo-type="dojox/mobile/ScrollablePane"
       data-dojo-props='height:"inherit"'
       style="background-color:yellow;color:black;">
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
    hello<br>
  </div>
</div>
ScrollablePane-example1.png

Rounded corner mask example

require([
  "dojox/mobile",
  "dojox/mobile/parser",
  "dojox/mobile/ScrollablePane",
  "dojox/mobile/ContentPane"
]);
<div data-dojo-type="dojox/mobile/View">
  <div data-dojo-type="dojox/mobile/ScrollablePane"
       data-dojo-props='height:"100px",
                        roundCornerMask:true,
                        radius:"5"'>
    <div data-dojo-type="dojox/mobile/ContentPane"
         style="margin:5px 9px 7px 9px;padding:8px;
                background-color:white;color:black;">
      Hello<br>
      Hello<br>
      Hello<br>
      Hello<br>
      Hello<br>
      Hello<br>
      Hello<br>
      Hello<br>
    </div>
  </div>
</div>
ScrollablePane-example2.png

Inheriting height from a parent div

When setting the height of a ScrollablePane to the value inherit, remember that the height is inherited from the offset parent. If you're using a wrapper DIV element as parent of a ScrollablePane in order to specify the height to inherit, remember that the position of the wrapper DIV element should be set to either relative, absolute or fixed for the wrapper to be the offset parent of the ScrollablePane.

Here is an example with two scrollable panes, in a same View, that uses wrapper DIV elements for sizing:

<div data-dojo-type="dojox/mobile/View" data-dojo-props="selected: true">
        <h1 data-dojo-type="dojox/mobile/Heading">Test ScrollablePane</h1>
        <div style="width:600px; height:250px; margin: 25px auto; position: relative;">
                <div data-dojo-type="dojox/mobile/ScrollablePane" data-dojo-props="height: 'inherit'">
                        <!-- Add content here -->
                </div>
        </div>

        <div style="width:600px; height:250px; margin: 25px auto; position: relative;">
                <div data-dojo-type="dojox/mobile/ScrollablePane" data-dojo-props="height: 'inherit'">
                        <!-- Add content here -->
                </div>
        </div>

</div>