Class sap.m.ScrollContainerModule: sap/m/ScrollContainer

extends Control

The ScrollContainer is a control that can display arbitrary content within a limited screen area and provides touch scrolling to make all content accessible.

Note that it is not recommended to have nested scrolling areas that scroll into the same direction (e.g. a ScrollContainer that scrolls vertically inside a Page control with scrolling enabled). This is currently not considered a valid use-case of a good UI and the behavior will feel wrong.

Constructor Summary
new sap.m.ScrollContainer(sId?, mSettings?)Constructor for a new ScrollContainer.
Events borrowed from class sap.ui.core.Control
Method Summary
sap.m.ScrollContainer.extend(sClassName, oClassInfo?, FNMetaImpl?)Creates a new subclass of class sap.m.ScrollContainer with name sClassName and enriches it with the information contained in oClassInfo.
sap.m.ScrollContainer.getMetadata()Returns a metadata object for class sap.m.ScrollContainer.
addContent(oContent)Adds some content to the aggregation content.
destroyContent()Destroys all the content in the aggregation content.
getContent()Gets content of aggregation content.
getFocusable()Gets current value of property focusable.
getHeight()Gets current value of property height.
getHorizontal()Gets current value of property horizontal.
getVertical()Gets current value of property vertical.
getWidth()Gets current value of property width.
indexOfContent(oContent)Checks for the provided sap.ui.core.Control in the aggregation content.
insertContent(oContent, iIndex)Inserts a content into the aggregation content.
removeAllContent()Removes all the controls from the aggregation content.
removeContent(vContent)Removes a content from the aggregation content.
scrollTo(x, y, time)Scrolls to the given position.
scrollToElement(element, time?)Scrolls to an element(DOM or sap.ui.core.Element) within the page if the element is rendered.
setFocusable(bFocusable)Sets a new value for property focusable.
setHeight(sHeight)Sets a new value for property height.
setHorizontal(bHorizontal)Sets a new value for property horizontal.
setVertical(bVertical)Sets a new value for property vertical.
setWidth(sWidth)Sets a new value for property width.
Constructor Detail
new sap.m.ScrollContainer(sId?, mSettings?)
Constructor for a new ScrollContainer.

Accepts an object literal mSettings that defines initial property values, aggregated and associated objects as well as event handlers. See sap.ui.base.ManagedObject for a general description of the syntax of the settings object.

The supported settings are:

  • Properties
    • width : sap.ui.core.CSSSize (default: auto)
    • height : sap.ui.core.CSSSize (default: auto)
    • horizontal : boolean (default: true)
    • vertical : boolean (default: false)
    • focusable : boolean (default: false)
  • Aggregations
    • content : sap.ui.core.Control[] (default)

In addition, all settings applicable to the base type sap.ui.core.Control can be used as well.

Parameters:
{string}sId? id for the new control, generated automatically if no id is given
{object}mSettings? initial settings for the new control
Method Detail
sap.m.ScrollContainer.extend(sClassName, oClassInfo?, FNMetaImpl?): function
Creates a new subclass of class sap.m.ScrollContainer with name sClassName and enriches it with the information contained in oClassInfo.

oClassInfo might contain the same kind of information as described in sap.ui.core.Control.extend.

Parameters:
{string}sClassName Name of the class being created
{object}oClassInfo? Object literal with information about the class
{function}FNMetaImpl? Constructor function for the metadata object; if not given, it defaults to sap.ui.core.ElementMetadata
Returns:
{function} Created class / constructor function
sap.m.ScrollContainer.getMetadata(): sap.ui.base.Metadata
Returns a metadata object for class sap.m.ScrollContainer.
Returns:
{sap.ui.base.Metadata} Metadata object describing this class
addContent(oContent): sap.m.ScrollContainer
Adds some content to the aggregation content.
Parameters:
{sap.ui.core.Control}oContent the content to add; if empty, nothing is inserted
Returns:
{sap.m.ScrollContainer} Reference to this in order to allow method chaining
destroyContent(): sap.m.ScrollContainer
Destroys all the content in the aggregation content.
Returns:
{sap.m.ScrollContainer} Reference to this in order to allow method chaining
getContent(): sap.ui.core.Control[]
Gets content of aggregation content.

The content of the ScrollContainer.

Returns:
{sap.ui.core.Control[]}
getFocusable(): boolean
Gets current value of property focusable.

Whether the scroll container can be focused.

Note that it should be set to "true" when there are no focusable elements inside or when keyboard interaction requires an additional tab stop on the container.

Default value is false.

Returns:
{boolean} Value of property focusable
getHeight(): sap.ui.core.CSSSize
Gets current value of property height.

The height of the ScrollContainer. By default the height equals the content height. If only horizontal scrolling is used, do not set the height or make sure the height is always larger than the height of the content.

Note that when a percentage is given, for the height to work as expected, the height of the surrounding container must be defined.

Default value is auto.

Returns:
{sap.ui.core.CSSSize} Value of property height
getHorizontal(): boolean
Gets current value of property horizontal.

Whether horizontal scrolling should be possible.

Default value is true.

Returns:
{boolean} Value of property horizontal
getVertical(): boolean
Gets current value of property vertical.

Whether vertical scrolling should be possible.

Note that this is off by default because typically a Page is used as fullscreen element which can handle vertical scrolling. If this is not the case and vertical scrolling is required, this flag needs to be set to "true". Important: it is not supported to have nested controls that both enable scrolling into the same dimension.

Default value is false.

Returns:
{boolean} Value of property vertical
getWidth(): sap.ui.core.CSSSize
Gets current value of property width.

The width of the ScrollContainer. If not set, it consumes the complete available width, behaving like normal HTML block elements. If only vertical scrolling is enabled, make sure the content always fits or wraps.

Default value is auto.

Returns:
{sap.ui.core.CSSSize} Value of property width
indexOfContent(oContent): int
Checks for the provided sap.ui.core.Control in the aggregation content. and returns its index if found or -1 otherwise.
Parameters:
{sap.ui.core.Control}oContent The content whose index is looked for
Returns:
{int} The index of the provided control in the aggregation if found, or -1 otherwise
insertContent(oContent, iIndex): sap.m.ScrollContainer
Inserts a content into the aggregation content.
Parameters:
{sap.ui.core.Control}oContent the content to insert; if empty, nothing is inserted
{int}iIndex the 0-based index the content should be inserted at; for a negative value of iIndex, the content is inserted at position 0; for a value greater than the current size of the aggregation, the content is inserted at the last position
Returns:
{sap.m.ScrollContainer} Reference to this in order to allow method chaining
removeAllContent(): sap.ui.core.Control[]
Removes all the controls from the aggregation content.

Additionally, it unregisters them from the hosting UIArea.

Returns:
{sap.ui.core.Control[]} An array of the removed elements (might be empty)
removeContent(vContent): sap.ui.core.Control
Removes a content from the aggregation content.
Parameters:
{int|string|sap.ui.core.Control}vContent The contentto remove or its index or id
Returns:
{sap.ui.core.Control} The removed content or null
scrollTo(x, y, time): sap.m.ScrollContainer
Scrolls to the given position. When called while the control is not rendered (yet), the scrolling position is still applied, but there is no animation.
Parameters:
{int}x The horizontal pixel position to scroll to. Scrolling to the right happens with positive values. In right-to-left mode scrolling starts at the right side and higher values scroll to the left. If only vertical scrolling is enabled, give 0 as value.
{int}y The vertical pixel position to scroll to. Scrolling down happens with positive values. If only horizontal scrolling is enabled, give 0 as value.
{int}time The duration of animated scrolling. To scroll immediately without animation, give 0 as value. 0 is also the default value, when this optional parameter is omitted.
Returns:
{sap.m.ScrollContainer}
scrollToElement(element, time?): sap.m.ScrollContainer
Scrolls to an element(DOM or sap.ui.core.Element) within the page if the element is rendered.
Parameters:
{HTMLElement|sap.ui.core.Element}element The element to which should be scrolled.
{int}time? The duration of animated scrolling. To scroll immediately without animation, give 0 as value or leave it default.
Since:
1.30
Returns:
{sap.m.ScrollContainer}this to facilitate method chaining.
setFocusable(bFocusable): sap.m.ScrollContainer
Sets a new value for property focusable.

Whether the scroll container can be focused.

Note that it should be set to "true" when there are no focusable elements inside or when keyboard interaction requires an additional tab stop on the container.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is false.

Parameters:
{boolean}bFocusable New value for property focusable
Returns:
{sap.m.ScrollContainer} Reference to this in order to allow method chaining
setHeight(sHeight): sap.m.ScrollContainer
Sets a new value for property height.

The height of the ScrollContainer. By default the height equals the content height. If only horizontal scrolling is used, do not set the height or make sure the height is always larger than the height of the content.

Note that when a percentage is given, for the height to work as expected, the height of the surrounding container must be defined.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is auto.

Parameters:
{sap.ui.core.CSSSize}sHeight New value for property height
Returns:
{sap.m.ScrollContainer} Reference to this in order to allow method chaining
setHorizontal(bHorizontal): sap.m.ScrollContainer
Sets a new value for property horizontal.

Whether horizontal scrolling should be possible.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is true.

Parameters:
{boolean}bHorizontal New value for property horizontal
Returns:
{sap.m.ScrollContainer} Reference to this in order to allow method chaining
setVertical(bVertical): sap.m.ScrollContainer
Sets a new value for property vertical.

Whether vertical scrolling should be possible.

Note that this is off by default because typically a Page is used as fullscreen element which can handle vertical scrolling. If this is not the case and vertical scrolling is required, this flag needs to be set to "true". Important: it is not supported to have nested controls that both enable scrolling into the same dimension.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is false.

Parameters:
{boolean}bVertical New value for property vertical
Returns:
{sap.m.ScrollContainer} Reference to this in order to allow method chaining
setWidth(sWidth): sap.m.ScrollContainer
Sets a new value for property width.

The width of the ScrollContainer. If not set, it consumes the complete available width, behaving like normal HTML block elements. If only vertical scrolling is enabled, make sure the content always fits or wraps.

When called with a value of null or undefined, the default value of the property will be restored.

Default value is auto.

Parameters:
{sap.ui.core.CSSSize}sWidth New value for property width
Returns:
{sap.m.ScrollContainer} Reference to this in order to allow method chaining