Porsche Design System

Scroller

Table of Contents

Height
Scroll to position

Height#

The height of p-scroller depends on the height of its content.

Keep in mind that the content passed to the p-scroller should be within the size definition of the design system and thus have a minimum height of 24px to ensure visual alignment of the scroll indicators.

The p-scroller only takes care of horizontal alignment. Spacing and custom CSS properties must be handled by the consumer, e.g. white-space: nowrap, to avoid line breaks inside the elements.

Some tag content

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-dismissible class="me-static-md">
    Some tag content
  </p-tag-dismissible>
  <p-tag-dismissible class="me-static-md">
    Some tag content
  </p-tag-dismissible>
  <p-tag-dismissible class="me-static-md">
    Some tag content
  </p-tag-dismissible>
  <p-tag-dismissible class="me-static-md">
    Some tag content
  </p-tag-dismissible>
  <p-tag-dismissible class="me-static-md">
    Some tag content
  </p-tag-dismissible>
</p-scroller>
<script>

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

Scroll to position#

The p-scroller component provides the scrollToPosition property. It accepts { scrollPosition: number, isSmooth?: boolean }.

If scrollToPosition is set with isSmooth: true, the scrolling is animated.

Scroll to start

Scroll to middle

Scroll to end

START - some tag content

MIDDLE - some tag content

END - some tag content

Open in Stackblitz

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

<p-button type="button" id="start" compact="true">Scroll to start</p-button>
<p-button type="button" id="middle" compact="true">Scroll to middle</p-button>
<p-button type="button" id="end" compact="true">Scroll to end</p-button>

<div style="max-width: 400px; white-space: nowrap">
  <p-scroller scroll-to-position="{scrollPosition: 220}">
    <p-tag-dismissible>START - some tag content</p-tag-dismissible>
    <p-tag-dismissible>MIDDLE - some tag content</p-tag-dismissible>
    <p-tag-dismissible>END - some tag content</p-tag-dismissible>
  </p-scroller>
</div>



<style>
  p-scroller > *:not(:last-child) {
    margin-right: 1rem;
  }

  button {
    margin: 0 1rem 1rem 0;
  }
</style>
<script>
  const scroller = document.querySelector('p-scroller');

  const scrollToStart = document.querySelector('#start');
  scrollToStart.addEventListener('click', () => {
    scroller.scrollToPosition = { scrollPosition: 0, isSmooth: true };
  });

  const scrollToMiddle = document.querySelector('#middle');
  scrollToMiddle.addEventListener('click', () => {
    scroller.scrollToPosition = { scrollPosition: 220, isSmooth: true };
  });

  const scrollToEnd = document.querySelector('#end');
  scrollToEnd.addEventListener('click', () => {
    scroller.scrollToPosition = { scrollPosition: 720, isSmooth: true };
  });
</script>
</body>
</html>