Scroller
Scroller is a component container for creating scrollable areas in the UI.
<VerticalLayout style={{ border: '1px solid var(--lumo-contrast-20pct)', height: '400px', width: '360px' }}>
<header className={cn('flex', 'ml-m')}>
<h2 className={cn('mt-s', 'mb-s')}>Edit employee</h2>
</header>
<Scroller scrollDirection='vertical' className='p-m'>
<section aria-labelledby='personal-title'>
<h3 className={cn('mt-s', 'mb-s')}>Personal information</h3>
<TextField className='w-full' label='First name' />
<TextField className='w-full' label='Last name' />
<DatePicker initialPosition='1990-01-01' label='Birthdate' className='w-full' />
</section>
<section aria-labelledby='employment-title'>
<h3 id='employment-title'>Employment information</h3>
<TextField className='w-full' label='Position' />
<TextArea className='w-full' label='Additional information' />
</section>
</Scroller>
<footer className={cn('flex', 'ml-m')}>
<Button theme='primary'>Save</Button>
<Button theme='tertiary'>Reset</Button>
</footer>
</VerticalLayout>
Scroll direction
Scroller has four different scroll directions: vertical, horizontal, both, and none. Scroller’s default scroll direction is both.