Overview

Scroll container as simple as it should be, it can be placed anywhere on a page — inside cards, columns, rows or any nested layout. Unlike Mendix's standard Scroll Container, which only works as the root element of a page, this widget lets you add one or many independent scrollable areas wherever you need them.

The height can be fixed (pixels or percentage) or dynamic, automatically stretching to the bottom of the screen and resizing live when the window changes.

Set a different height mode per device — Desktop, Tablet and Phone each have their own Height Unit, Height and Margin Correction — so you get full control over responsive behavior without extra CSS.

Manage scroll cursor position with a decimal attribute, manage transition and duration.

Documentation

**Typical usage scenario**

One or many scrollable areas on the same page, nested inside other layout rows and/or columns (e.g. side-by-side cards that each scroll independently).

Note: the standard "Scroll Container" must be the root element of the page and cannot be nested inside anything.

**Responsive height (Desktop / Tablet / Phone)**

The widget exposes three independent property groups — Desktop, Tablet and Mobile — each with:

- Height Unit: Dynamic, Pixels or Percentage

- Height: the value used for Pixels and Percentage

- Margin Correction: a positive or negative pixel offset to fine-tune the result

This lets you, for example, use a Dynamic full-screen height on Desktop while switching to a fixed Pixel or Percentage height on Tablet and Phone.

Breakpoints follow the Atlas layout grid: Phone up to 579px, Tablet 580–991px, Desktop from 992px.

**Height units**

- Dynamic: the height stretches to reach the bottom of the screen and resizes automatically when the window is resized. The computed CSS looks like:
ContainerHeight = 100vh (screen height) − elementYPosition − marginCorrection
where elementYPosition is refreshed in live as it's responsive.

- Pixels: a fixed height in pixels.

- Percentage: a percentage of the screen height (viewport-based), independent of the parent size.

**Configuration & tips**

- You can further customize the appearance via the CSS class .mx-scrollDynamicHeightContainer.

- Be cautious with responsive behavior. On Tablet or Phone, a fixed Pixel or Percentage height is usually the safest choice.

- If you use Dynamic height on Tablet or Phone, make sure the widget stays inside a column. Otherwise it fills 100% of the width and height, making the rest of the page unreachable.

- Use Margin Correction to compensate for surrounding paddings, footers or sticky elements when the dynamic height doesn't land exactly where you expect.

**Design-mode preview**

The "Preview height (px)" property only affects how the scrollable box is displayed in the Studio Pro editor. It has no effect at runtime.

**Scroll cursor position**

The Scroll position feature lets you read and control the container's scroll position from your domain model as a percentage (0 = top, 100 = fully scrolled to the bottom). Leave it empty to keep the widget's default behavior with no overhead.

Properties

Property Type Description

• Scroll position : Attribute (Decimal), optional Bidirectional scroll position in percent (0–100). Bind it to a Decimal attribute, typically on a non-persistable "paging" entity. Leave empty to disable this behavior.
• Smooth scroll : Boolean, optional When true, position changes are animated instead of jumping. Hard-code true/false or bind a Boolean attribute.
• Scroll duration (ms) : Integer, optional Only used when Smooth scroll is true. Time in milliseconds for the whole move, at a constant pace. 0 or empty uses the browser's default smooth-scroll speed.

Behavior

• Scroll → attribute: as the user scrolls, the attribute is updated shortly after they pause, written with 2-decimal precision. When the content fits (nothing to scroll), 0 is written.
• Attribute → scroll: setting the attribute (e.g. from a microflow or nanoflow) moves the container to that position. The value is clamped to the 0–100 range.
• Restore on load: if the attribute already holds a value when the page opens, the container scrolls to it once the content has rendered.
• Read-only context: if the attribute is not editable, the widget still scrolls to it but does not write back (one-way in).

Controlling the animation speed

• Smooth scroll alone uses the browser's built-in easing, which has a fixed, fairly quick speed.
• To scroll at a steady, readable pace — for example to slowly reveal a long container end-to-end — enable Smooth scroll and set Scroll duration to the total time you want the move to take (e.g. 10000 for 10 seconds). The container then moves at a constant speed over that duration.