Managing Scrolling
Overflow behavior occurs when the content of an element (its own content and child elements) exceeds the size of the element itself. During the process of building a page, it is inevitable to encounter situations of overflow. You can use the overflow property to crop the overflowing content, or use a [scrollable element](#scrollable element to make the overflowing content scrollable, and control the scrolling direction of the content through the scroll-orientation property.
non-scrollable element | scrollable element | ||
|---|---|---|---|
 |  |  |  |
overflow: hidden | scroll-orientation: vertical scrollable element | scroll-orientation: horizontal scrollable element |
Doesn't supportoverflow:scrollfor scrolling effect !
In Lynx, the view component doesn't support the scrolling effect achieved by overflow: scroll as in the Web. Only scrolling containers like <scroll-view> and <list> have the scrolling effect.
scrollable element
For some basic <view> element, the scrolling effect is not supported. Please use dedicated scroll container components <scroll-view> or <list>.
use <scroll-view> for basic scrolling
<scroll-view> is a basic scrolling component in Lynx. It allows users to scroll content vertically or horizontally within a fixed viewport area. Take the following figure as an example. When the height of the internal child nodes exceeds that of the parent <scroll-view> container, you only need to set the layout direction scroll-orientation to vertical to achieve the vertical scrolling effect.
use <list> to manage large amount of data
<scroll-view> is used to display a small amount of data in a simple and intuitive way. On the other hand, <list> is suitable for scenarios where a large amount of data needs to be presented, or in scenarios with infinite scrolling for loading more content. It can adopt an on-demand loading way, rendering only the content in the visible area.
use <list> to handle complex layout
<scroll-view> only has the ability of linear layout, presenting elements in an orderly manner through linear arrangement. However, when facing complex interfaces, <list> offers a wide range of layout options. You can choose different layouts such as flow and waterfall to flexibly customize business requirements.
Additional Features
-
<list>paginated scrolling -
<list>load more