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>
    )
}
React TSX

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;
}
CSS

<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.)

Join the Mighty Guides mailing list    ( ± 6 emails/year )

GDPR

We use Mailchimp as our marketing platform. By clicking below to subscribe, you acknowledge that your information will be transferred to Mailchimp for processing per their Privacy Policy and Terms.

Leave a Reply