dojox.layout.ScrollPane

Project owner:?--
since:V?

dojox.layout.ScrollPane is an interesting UI, scrolling an overflowed div based on mouse position, either vertical or horizontal.

Introduction

A pane that "scrolls" its content based on the mouse poisition inside

Usage

A sizable container that takes it's content's natural size and creates a scroll effect based on the relative mouse position. It is an interesting way to display lists of data, or blocks of content, within a confined space.

Horizontal scrolling is supported. Combination scrolling is not.

Vertical orientation is set by default, you can set orientation to horizontal.

All example are > 1.7.

Programmatic Creation:

require(["dojox/layout/ScrollPane"], function( ScrollPane){
             var scrollPane = new dojox.layout.ScrollPane({
                     orientation: "vertical",
                     style:"width:125px; height:200px; border:1px solid; overflow:hidden;"
             },"someNodeId");
     });

Declarative (HTML) Creation:

<div data-dojo-type=="dojox.layout.ScrollPane" style="width:150px height:300px;">
  <!-- Any Height Content -->
</div>

Examples

Programmatic example

require(["dojox/layout/ScrollPane"], function( ScrollPane){
    var scrollPane = new dojox.layout.ScrollPane({
        orientation: "vertical",
        style:"width:125px; height:200px; border:1px solid; overflow:hidden;"
    },"someNodeId0");
});
<h2>Programatic Vertical:<h2>

<div id="someNodeId0">
    <ol>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
        <li>text</li>
    </ol>
</div>

Declarative example

td
{
  border: 1px solid black;
  padding: 6px;
}
require(["dojox/layout/ScrollPane"]);
<h2>Declarative (HTML) Vertical:</h2>
<div>

        <div data-dojo-type="dojox.layout.ScrollPane" style="width:100px; height:150px; border:1px solid; overflow:hidden;">
                <ol>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                        <li>text</li>
                </ol>
        </div>

</div>


<br style="clear:both;">

<h2>Declaritive (HTML) Horizontal</h2>
<div data-dojo-type="dojox.layout.ScrollPane" data-dojo-props='orientation:"horizontal"' style="width:500px; height:50px; border:1px solid; overflow:hidden;">
<table>
        <tr>
                <td>Text</td>
                <td>Text</td>

                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>

                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>

                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
                <td>Text</td>
        </tr>

</table>
</div>