Some Examples » 19. Scroll and Page combined
19. Scroll and Page combined
By enabling directionLock on both the scroll and page components, only one of them will move at a time.
Code component
const items = [0, 1, 2, 3, 4]
export default function CC_19_Scroll_and_Page_combined(props) {
return (
<div>
<Page
width={150}
height={150}
radius={30}
directionLock
>
<div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
}}
/>
<Scroll
width={150}
height={150}
radius={30}
directionLock
>
{items.map((index) => {
return (
<div
style={{
width: 150,
height: 70,
borderRadius: 20,
backgroundColor: "#fff",
marginBottom:
index !== items.length - 1 ? 10 : 0,
}}
/>
)
})}
</Scroll>
<div
style={{
width: 150,
height: 150,
borderRadius: 30,
backgroundColor: "#fff",
}}
/>
</Page>
</div>
)
}Pro tip: When using the <Page> component in a React project (like in the CodeSandbox above), set the box-sizing of all elements to border-box. Like this, for instance:
* {
box-sizing: border-box;
}
<Page>
box-sizing, CSS universal selector (*)
Code override
You only need the page and scroll tools to recreate this on the canvas. No code needed! (directionLock is called ‘Lock’ in the properties panel.)