Smart Scroll View
The Smart Scroll View is used to make long content scrollable intelligently—often combining multiple scrollable areas (headers, lists, grids, sections) into one smooth scrolling experience. It can also help with things like sticky headers, collapsing areas, or coordinated scrolling.
Use Cases
Use Smart Scroll View when you want:
Single smooth scroll for complex pages
A screen with a banner → tabs → lists → sections, all scrolling together
Dashboard-style pages with multiple content blocks that should scroll as one
Sticky / collapsing areas
A header that shrinks or sticks to the top while the user scrolls
Filters or tab bars that stay pinned while the content below scrolls
Mixed content in one scroll
Text sections, images, carousels, and lists on the same page
Landing/marketing pages with multiple vertically stacked modules
Better UX than nested scrolls
Avoid “scroll inside scroll” issues (e.g., ListView inside ScrollView)
Make scrolling feel natural and unified for the user
Core Concepts
Unified Scrolling
Combines multiple child widgets (lists, grids, static sections) into one scrollable flow, so the user scrolls the entire page with a single gesture.
Smart Scroll View is the main scroll container
Smart Scroll Group is typically used as its child to hold all scrollable content in a structured way
Scroll-Aware Behavior
Can react to scroll position to:
Pin headers or filters
Trigger animations (e.g., fade/scale header)
Show/hide UI (like a “Back to top” button)
When used with Pinned Header, Smart Scroll View ensures:
Header stays visible when you scroll
Content scrolls underneath the pinned area
Transitions are smooth and coordinated
Layout Flexibility
Lets you mix:
Static content (text, banners)
Dynamic content (lists, grids)
Special sections (carousels, cards)
All managed in a way that avoids scroll conflicts.
This is usually done by:
Wrapping content inside a Smart Scroll Group
Adding Pinned Header at the top of that group when you need a sticky section
Data Source
The Smart Scroll View widget has a Data Source property that can be used to dynamically generate children widgets. You can input either static data or dynamic data using expressions.
This is useful for:
Creating repeated sections (cards, rows, list items)
Binding dynamic content (from APIs, local data, etc.)
Building complex scrollable layouts without manually duplicating widgets
Relationship with Smart Scroll Group & Pinned Header
Smart Scroll View is designed to work closely with:
Smart Scroll Group (Child of Smart Scroll View)
Acts as the main container for all scrollable content inside Smart Scroll View
Groups multiple widgets/sections into one logical scrollable block
Ensures that mixed content (headers, lists, banners, cards) scrolls smoothly as a single experience
Pinned Header (Child inside Smart Scroll Group)
Placed at the top of a Smart Scroll Group
Stays fixed or “pinned” at the top while the rest of the content scrolls
Ideal for section titles, filters, tabs, or important CTAs that should always remain visible
Performance Tip:
Smart Scroll View= main scroll containerSmart Scroll Group= scrollable content section inside itPinned Header = sticky element inside the group that stays visible during scroll
Properties
Controller
An expression to control the scroll position of the view.
isReversed
If true, the scroll view scrolls in the opposite direction.
Scroll Direction
The direction in which the view scrolls (Vertical or Horizontal).
Allow Scroll
If true, the view will be scrollable.
Default Properties
The Smart Scroll View supports all Default Properties.
Last updated