Skip to main content

<pc-scrollview>

The <pc-scrollview> tag is used to define a scroll view component, which lets the user scroll a larger content area within a clipped viewport.

Usage
  • It must be a direct child of a <pc-entity> that also has a <pc-element>.
  • It references its viewport, content, and scrollbar entities by CSS selector, element id, or entity name.
  • The viewport element should have its mask attribute set so the content is clipped to the scroll view's bounds.

Attributes​

AttributeTypeDefaultDescription
bounce-amountNumber"0.1"How far content bounces past its bounds when scroll-mode="bounce" (0 to 1)
contentString-Reference to the content <pc-entity> that is moved as the view is scrolled
enabledBoolean"true"Enabled state of the component
frictionNumber"0.05"How freely the content moves once thrown (0 = none, 1 = high)
horizontalBoolean"true"Whether horizontal scrolling is enabled
horizontal-scrollbarString-Reference to the <pc-entity> holding the horizontal <pc-scrollbar>
horizontal-scrollbar-visibilityEnum"when-required"When the horizontal scrollbar is shown: "always" | "when-required"
mouse-wheel-sensitivityVector2"1 1"Mouse wheel sensitivity as x y (0 on an axis disables wheel scrolling for it)
scroll-modeEnum"bounce"Behavior when scrolled past bounds: "clamp" | "bounce" | "infinite"
use-mouse-wheelBoolean"true"Whether the scroll view responds to the mouse wheel
verticalBoolean"true"Whether vertical scrolling is enabled
vertical-scrollbarString-Reference to the <pc-entity> holding the vertical <pc-scrollbar>
vertical-scrollbar-visibilityEnum"when-required"When the vertical scrollbar is shown: "always" | "when-required"

Example​

<pc-entity name="scroll-view">
    <pc-element type="group" width="230" height="400"></pc-element>
    <pc-scrollview
        horizontal="false"
        vertical="true"
        viewport="#viewport"
        content="#content"
        vertical-scrollbar="#v-scrollbar"></pc-scrollview>

    <!-- Viewport clips the content to the scroll view's bounds -->
    <pc-entity name="viewport" id="viewport">
        <pc-element type="image" anchor="0 0 1 1" mask></pc-element>

        <!-- Content is moved as the view is scrolled -->
        <pc-entity name="content" id="content">
            <pc-element type="group" anchor="0 1 0 1" pivot="0 1" width="220" height="700" use-input></pc-element>
        </pc-entity>
    </pc-entity>

    <!-- Vertical scrollbar -->
    <pc-entity name="v-scrollbar" id="v-scrollbar">
        <pc-element type="image" anchor="1 0 1 1" width="20"></pc-element>
        <pc-scrollbar orientation="vertical" handle="#v-handle"></pc-scrollbar>
        <pc-entity name="handle" id="v-handle">
            <pc-element type="image" anchor="0 1 1 1" use-input></pc-element>
            <pc-button></pc-button>
        </pc-entity>
    </pc-entity>
</pc-entity>

JavaScript Interface​

You can programmatically create and manipulate <pc-scrollview> elements using the ScrollViewComponentElement API.