Class sap.m.ScrollContainerModule: sap/m/ScrollContainer
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.
sClassName
and enriches it with the information contained in oClassInfo
. 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.
{string} | sId? | id for the new control, generated automatically if no id is given |
{object} | mSettings? | initial settings for the new control |
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.
{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 |
{function} | Created class / constructor function |
{sap.ui.base.Metadata} | Metadata object describing this class |
content
. {sap.ui.core.Control} | oContent | the content to add; if empty, nothing is inserted |
{sap.m.ScrollContainer} | Reference to this in order to allow method chaining |
content
. {sap.m.ScrollContainer} | Reference to this in order to allow method chaining |
content
. The content of the ScrollContainer.
{sap.ui.core.Control[]} |
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
.
{boolean} | Value of property focusable |
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
.
{sap.ui.core.CSSSize} | Value of property height |
horizontal
. Whether horizontal scrolling should be possible.
Default value is true
.
{boolean} | Value of property horizontal |
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
.
{boolean} | Value of property vertical |
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
.
{sap.ui.core.CSSSize} | Value of property width |
sap.ui.core.Control
in the aggregation content
. and returns its index if found or -1 otherwise. {sap.ui.core.Control} | oContent | The content whose index is looked for |
{int} | The index of the provided control in the aggregation if found, or -1 otherwise |
content
. {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 |
{sap.m.ScrollContainer} | Reference to this in order to allow method chaining |
content
. Additionally, it unregisters them from the hosting UIArea.
{sap.ui.core.Control[]} | An array of the removed elements (might be empty) |
content
. {int|string|sap.ui.core.Control} | vContent | The contentto remove or its index or id |
{sap.ui.core.Control} | The removed content or null |
{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. |
{sap.m.ScrollContainer} |
{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
{sap.m.ScrollContainer} | this to facilitate method chaining. |
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
.
{boolean} | bFocusable | New value for property focusable |
{sap.m.ScrollContainer} | Reference to this in order to allow method chaining |
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
.
{sap.ui.core.CSSSize} | sHeight | New value for property height |
{sap.m.ScrollContainer} | Reference to this in order to allow method chaining |
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
.
{boolean} | bHorizontal | New value for property horizontal |
{sap.m.ScrollContainer} | Reference to this in order to allow method chaining |
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
.
{boolean} | bVertical | New value for property vertical |
{sap.m.ScrollContainer} | Reference to this in order to allow method chaining |
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
.
{sap.ui.core.CSSSize} | sWidth | New value for property width |
{sap.m.ScrollContainer} | Reference to this in order to allow method chaining |