Tabris.js Widgets: ScrollView
The ScrollView is a composite widget, meaning it can contain other widgets like text and images. For those familiar with web development, the ScrollView provides the functionality we are used to finding on the window browser object; it is like a scrollable page. The content might overflow the ScrollView on the X-axis or on the Y-axis. The ScrollView gives the ability to scroll to this content horizontally or vertically.
This is an example of vertical scroll (scrollview-parallax.jsx – find it at https://playground.tabris.com/ or the GitHub repo). Note the scroll bar on the right hand side. This can be turned off by setting scrollbarVisible={false} on the ScrollView element.
Like the window object, we have the expected scroll events that fire on horizontal scroll (onScrollX) and vertical scroll. Our handler functions have access to a read-only offset property.
In the example below, we use destructuring to access the offset of the scroll position on the ScrollView.
|
1 2 3 4 5 6 7 |
<ScrollView stretch onScrollY={updateCurrentPosition}> function updateCurrentPosition({offset}) { imageView.transform = {translationY: Math.max(0, offset * 0.4)}; titleView.transform = {translationY: Math.max(0, offset - titleViewY)}; titleView.background = primaryColor(calculateTitleViewOpacity(offset)); } |
In addition, and specific to mobile development, is the idea of a scrollState. This can be accessed through the ScrollView’s scrollXState property and the scrollYState property. Possible values are ‘drag,’ ‘rest’ or ‘scroll,’ where drag refers to the user moving content with her finger on the touch screen device. ‘Scroll’ is when a ScrollView is scrolling programmatically , or continues to move after the user has dragged.
The following logs the ScrollState of the X-axis scroll:
|
1 |
<ScrollView onScrollX={ (e) => { console.log($(ScrollView).only().scrollXState); } }> |
onScrollXStateChanged and onScrollYStateChanged event listeners fire whenever the scroll state changes. In our event handlers we have access to the current scroll state.
The ability to scroll is determined by the size of the child elements. These must overflow the ScrollView in order for scrolling functionality to kick in.
Take the following example:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import {Button, contentView, ScrollView, TextView} from 'tabris'; contentView.append( <$> <ScrollView stretchX centerY height={100} background='#234' direction='horizontal' padding={16} onScrollXStateChanged={(e) => $(TextView)[1].text = `Scroll state: <b>${e.value}</b>`}> <TextView centerY font='16px' textColor='white'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </TextView> </ScrollView> <TextView left={16} right={16} bottom={['next()', 16]} alignment='centerX' markupEnabled/> <Button left={16} right={16} bottom={16} text='Scroll to 300' onSelect={() => $(ScrollView).only().scrollToX(300)}/> </$> ); |
stretchX sets the ScrollView width to the width of the contentView, while the TextView width is left to its default of ‘auto’, which means it flows off the screen. However, if we add stretchX to the TextView, so it is the same width as the ScrollView there is no content to scroll to.
Also note that the dimensions of the ScrollView must be defined. According to the documentation – either the ScrollView’s width or left and right must be specified. In the above example if we remove the stretchX property that sets the ScrollView’s width, the overflow cannot calculate and, despite the text flowing off the screen, the scroll does not work.
Run this example on the Tabris developer app with the QR Code below:
Feedback is welcome!
Want to join the discussion?Feel free to contribute!
