The scroll mask is primarily an internal helper used in components like the DataTable, where content may horizontally overflow its container.

Usage

Pass an element or elements as children to the ScrollMask. Do not handle scroll on child element(s), that's controlled within the component.

Edit in Playroom

<ScrollMask>
  <Inline gap="small">
    {Array.from({ length: 12 }, (_, i) => (
      <Box
        background="dim"
        key={i}
        height={120}
        borderRadius="small"
        width={240}
      />
    ))}
  </Inline>
</ScrollMask>

Scroll Indicator

The scroll indicator is displayed by default, indicating that there is more content available beyond the cropping container. The indicator is hidden once the user initially scrolls and is not shown again.

Though it's not recommended for most cases, you may optionally hide the scroll indicator where appropriate.

Edit in Playroom

const [key, setKey] = useState(0);
const [shown, setShown] = useState(true);
const toggle = (e) => setShown(e.target.checked);
return (
  <Stack gap="small">
    <Flex alignItems="center" justifyContent="space-between">
      <Checkbox checked={shown} onChange={toggle}>
        <Text>Show scroll indicator</Text>
      </Checkbox>
      <Button
        label="Reset"
        variant="text"
        onClick={() => setKey(Math.random())}
      />
    </Flex>
    <ScrollMask key={key} showScrollIndicator={shown}>
      <Inline gap="small">
        {Array.from({ length: 12 }, (_, i) => (
          <Box
            background="dim"
            key={i}
            height={120}
            borderRadius="small"
            width={240}
          />
        ))}
      </Inline>
    </ScrollMask>
  </Stack>
);

Dynamic Content

Because the contents of the scroll mask might be dynamic, and/or may not overflow the container, the masks and indicator are hidden until required.

Edit in Playroom

const [key, setKey] = useState(0);
const [count, setCount] = useState(1);
const increment = () => setCount((c) => Math.min(c + 1, 12));
const decrement = () => setCount((c) => Math.max(c - 1, 1));
return (
  <Stack gap="small">
    <Flex alignItems="center" justifyContent="space-between">
      <Inline gap="small">
        <IconButton onClick={increment} icon={PlusIcon} />
        <IconButton onClick={decrement} icon={MinusIcon} />
      </Inline>
      <Button
        label="Reset"
        variant="text"
        onClick={() => setKey(Math.random())}
      />
    </Flex>
    <ScrollMask key={key}>
      <Inline gap="small">
        {Array.from({ length: count }, (_, i) => (
          <Box
            background="dim"
            key={i}
            height={120}
            borderRadius="small"
            width={240}
          />
        ))}
      </Inline>
    </ScrollMask>
  </Stack>
);

Scroll Mask

Scroll Indicator

Dynamic Content