> For the complete documentation index, see [llms.txt](https://help.craftsmanplus.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.craftsmanplus.com/play/layers/components/scrollable.md). # Scrollable The Scrollable component is a container that users can drag to explore content larger than its visible area. Anything outside the component's bounds is masked, so users scroll to reveal it. Use it for long product lists, terms and details panels, tall artwork, or any layout that doesn't fit on screen at once. ### Adding Content Hover the Scrollable layer in the Layers panel and click **Edit** to enter its edit mode, then use the **Add Layer** menu to build the content. Scrollables accept **Image**, **Text**, **Sequence**, **Hotspot**, **Group**, and **Shape** layers, and you can add as many as you need. Arrange the content freely — layers placed beyond the component's bounds are what users scroll to reach. Content layers keep their own interactions, so buttons and tappable areas inside the scrollable keep working as users scroll. ### Component Options * **Direction** sets which way users can scroll: **Up**, **Down**, **Left**, **Right**, **Up & Down**, **Left & Right**, or **All**. The default is **All**. Scrolling is clamped to the content bounds, so users can't drag the content fully out of view. ### Behavior Notes * The component's frame acts as a mask: content is only visible inside the Scrollable's bounds. * Scrolling works by dragging anywhere on the component. The interaction is built in — the layer's interaction list is fixed to this drag behavior, so add tap interactions to the content layers inside instead. * Scrollable layers cannot be rotated. {% hint style="info" %} In the editor the scrollable does not respond to dragging — use the Preview to test the scroll feel and confirm all content is reachable. {% endhint %} --- # Agent Instructions This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com. ## Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation by asking a question. Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters: ``` GET https://help.craftsmanplus.com/play/layers/components/scrollable.md?ask=&goal= ``` `ask` is the immediate question: it should be specific, self-contained, and written in natural language. `goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.