Porsche Design System

Scroller

The p-scroller component forces its child nodes to be rendered horizontally next to each other. In case not enough viewport space is given a clickable scroll indicator is shown and the elements become scrollable.

As soon as the slotted element(s) exceed the viewport / their respective container, scroll indicators are shown.

If the p-scroller component is accessed by keyboard navigation and is focused, scrolling via arrow right and arrow left is possible. If p-scroller contains focusable element(s) these can be also accessed by keyboard navigation.

Open in Stackblitz

<!doctype html>
<html lang="en" class="scheme-light-dark">
<head>
  <title></title>
</head>
<body class="bg-canvas">

<p-scroller class="max-w-[600px] whitespace-nowrap">
  <p-tag class="me-static-md" color="primary">
    <button type="button">
      Some tag content
    </button>
  </p-tag>
  <p-tag class="me-static-md" color="notification-info-soft">
    <button type="button">
      Some tag content
    </button>
  </p-tag>
  <p-tag class="me-static-md" color="notification-warning-soft">
    <button type="button">
      Some tag content
    </button>
  </p-tag>
  <p-tag class="me-static-md" color="primary">
    <button type="button">
      Some tag content
    </button>
  </p-tag>
  <p-tag class="me-static-md" color="notification-info-soft">
    <button type="button">
      Some tag content
    </button>
  </p-tag>
  <p-tag class="me-static-md" color="notification-warning-soft">
    <button type="button">
      Some tag content
    </button>
  </p-tag>
  <p-tag class="me-static-md" color="primary">
    <button type="button">
      Some tag content
    </button>
  </p-tag>
  <p-tag color="notification-info-soft">
    <button type="button">
      Some tag content
    </button>
  </p-tag>
</p-scroller>
<script>

</script>
</body>
</html>