deliteful/ScrollableContainer

deliteful/ScrollableContainer is a container widget with scrolling capabilities. This widget which can scroll its contents horizontally and/or vertically. Its scrolling capabilities and API are provided by its parent class delite/Scrollable.

Example of deliteful/ScrollableContainer on mobile:

Example of ScrollableContainer on mobile

Example of deliteful/ScrollableContainer on desktop:

Example of ScrollableContainer on desktop

Element Instantiation
Using ScrollableContainer
Element Styling
User Interactions
Events
Extending ScrollableContainer
Enterprise Use

Element Instantiation

For details on the instantiation lifecycle, see delite/Widget.

Declarative Instantiation

require(["deliteful/ScrollableContainer", 
         "requirejs-domready/domReady!"
        ], function () {
});

<html>
  <d-scrollable-container scrollDirection="both">
    <div>...</div>
    <div>...</div>
  </d-scrollable-container>
</html>

Programmatic Instantiation

require([
  "deliteful/ScrollableContainer"
  ], function (ScrollableContainer) {
    var sc = new ScrollableContainer({scrollDirection: "both"});
    sc.placeAt(document.body);

    // add content to the scrollable container:
    var child = document.createElement("div");
    sc.addChild(child);

    // If needed, listen to native "scroll" events:
    sc.on("scroll", function (event) {
      ...
    });
});

Using ScrollableContainer

By default, the scrolling capabilities are added to the widget's root node (that is, the widget itself). A sublcass of deliteful/ScrollableContainer can chose the node thanks to the property scrollableNode. This property must be set by the subclass at latest in its render() method.

Scroll Direction

The widget provides several scrolling modes through the scrollDirection property. For details, see Using delite/Scrollable.

Programmatic Scroll

In additional to the interactive scroll, the API of deliteful/ScrollableContainer provides methods for programmatic scroll. For details, see Using delite/Scrollable.

Element Events

During interactive or programmatic scrolling, native "scroll" events are emitted. For details, see Events in delite/Scrollable.

Element Styling

Style is defined by the CSS classes from the themes of the widget. In addition to the CSS classes defined by the superclass delite/Scrollable (see Element Styling in delite/Scrollable, deliteful/ScrollableContainer adds an empty marker class d-scrollable-container.

User Interactions

The scrolling interaction is handled natively by the browser in a multi-channel responsive manner. For details, see Interactions in delite/Scrollable.

Extending ScrollableContainer

First use-case: creating a widget extending deliteful/ScrollableContainer

define(["delite/register", "deliteful/ScrollableContainer", ...],
  function (register, Scrollable, ...) {
    return register("mywidget", [HTMLElement, ScrollableContainer, ...], {
      ...
      render: dcl.superCall(function (sup) {
        return function () {
          // Create a child element:
          var myScrollableDiv = document.createElement("div");
          ...
          this.appendChild(myScrollableDiv);
          // Indicate the scrollable child element:
          this.scrollableNode = myScrollableDiv; 
          sup.apply(this, arguments);
        };
      })
});

Characteristics:

Fits for widgets with one single scrollable element.
Exposes the API of the parent classes, including the scrolling API of delite/Scrollable.

Second use-case: creating a widget embedding widgets extending deliteful/ScrollableContainer

define(["delite/register", "deliteful/ScrollableContainer", ...],
  function (register, Scrollable, ...) {
    // In this use-case, does not extend delite/Scrollable
    // nor deliteful/ScrollableContainer
    return register("mywidget", [HTMLElement, ...], {
      ...
      render: dcl.superCall(function (sup) {
        return function () {
          var scrollableNode =
            // or your own scrollable widget
            new ScrollableContainer(...);
          ...
          this.appendChild(scrollableNode);
          // If needed, add other scrollable widgets as child elements
          sup.apply(this, arguments);
        };
      })
});