Examples

ESL Drag to Scroll

Horizontal scroll appears only if content is too long for the area (resize the section by dragging the lower right corner)

Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices. Et mi suscipit eget vulputate ante proin vel pretium enim. Vivamus venenatis eu urna tempor blandit nullam pellentesque metus rhoncus. Mauris mollis neque sed tincidunt tellus nunc ac nulla ut. Purus etiam id dui justo sapien scelerisque viverra ligula aenean. Porta condimentum nibh dictum congue odio facilisis finibus mattis vehicula. Lacinia risus placerat augue fringilla at facilisi arcu diam laoreet. Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices. Et mi suscipit eget vulputate ante proin vel pretium enim. Vivamus venenatis eu urna tempor blandit nullam pellentesque metus rhoncus.

Mauris mollis neque sed tincidunt tellus nunc ac nulla ut. Purus etiam id dui justo sapien scelerisque viverra ligula aenean. Porta condimentum nibh dictum congue odio facilisis finibus mattis vehicula. Lacinia risus placerat augue fringilla at facilisi arcu diam laoreet. Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices. Et mi suscipit eget vulputate ante proin vel pretium enim. Vivamus venenatis eu urna tempor blandit nullam pellentesque metus rhoncus. Mauris mollis neque sed tincidunt tellus nunc ac nulla ut. Purus etiam id dui justo sapien scelerisque viverra ligula aenean. Porta condimentum nibh dictum congue odio facilisis finibus mattis vehicula.

Lacinia risus placerat augue fringilla at facilisi arcu diam laoreet. Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices. Et mi suscipit eget vulputate ante proin vel pretium enim. Vivamus venenatis eu urna tempor blandit nullam pellentesque metus rhoncus. Mauris mollis neque sed tincidunt tellus nunc ac nulla ut. Purus etiam id dui justo sapien scelerisque viverra ligula aenean. Porta condimentum nibh dictum congue odio facilisis finibus mattis vehicula. Lacinia risus placerat augue fringilla at facilisi arcu diam laoreet. Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices. Et mi suscipit eget vulputate ante proin vel pretium enim.

Vivamus venenatis eu urna tempor blandit nullam pellentesque metus rhoncus. Mauris mollis neque sed tincidunt tellus nunc ac nulla ut. Purus etiam id dui justo sapien scelerisque viverra ligula aenean. Porta condimentum nibh dictum congue odio facilisis finibus mattis vehicula. Lacinia risus placerat augue fringilla at facilisi arcu diam laoreet. Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices. Et mi suscipit eget vulputate ante proin vel pretium enim. Vivamus venenatis eu urna tempor blandit nullam pellentesque metus rhoncus. Mauris mollis neque sed tincidunt tellus nunc ac nulla ut. Purus etiam id dui justo sapien scelerisque viverra ligula aenean.

Porta condimentum nibh dictum congue odio facilisis finibus mattis vehicula. Lacinia risus placerat augue fringilla at facilisi arcu diam laoreet. Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices. Et mi suscipit eget vulputate ante proin vel pretium enim. Vivamus venenatis eu urna tempor blandit nullam pellentesque metus rhoncus. Mauris mollis neque sed tincidunt tellus nunc ac nulla ut. Purus etiam id dui justo sapien scelerisque viverra ligula aenean. Porta condimentum nibh dictum congue odio facilisis finibus mattis vehicula. Lacinia risus placerat augue fringilla at facilisi arcu diam laoreet. Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices.

Et mi suscipit eget vulputate ante proin vel pretium enim. Vivamus venenatis eu urna tempor blandit nullam pellentesque metus rhoncus. Mauris mollis neque sed tincidunt tellus nunc ac nulla ut. Purus etiam id dui justo sapien scelerisque viverra ligula aenean. Porta condimentum nibh dictum congue odio facilisis finibus mattis vehicula. Lacinia risus placerat augue fringilla at facilisi arcu diam laoreet. Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices. Et mi suscipit eget vulputate ante proin vel pretium enim. Vivamus venenatis eu urna tempor blandit nullam pellentesque metus rhoncus. Mauris mollis neque sed tincidunt tellus nunc ac nulla ut.

Purus etiam id dui justo sapien scelerisque viverra ligula aenean. Porta condimentum nibh dictum congue odio facilisis finibus mattis vehicula. Lacinia risus placerat augue fringilla at facilisi arcu diam laoreet. Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices. Et mi suscipit eget vulputate ante proin vel pretium enim. Vivamus venenatis eu urna tempor blandit nullam pellentesque metus rhoncus. Mauris mollis neque sed tincidunt tellus nunc ac nulla ut. Purus etiam id dui justo sapien scelerisque viverra ligula aenean. Porta condimentum nibh dictum congue odio facilisis finibus mattis vehicula. Lacinia risus placerat augue fringilla at facilisi arcu diam laoreet.

<section style="resize: both; overflow: hidden; max-width: 100%; height: 500px; max-height: 70vh;" class="border bg-white relative-block">
  <div style="max-width: 100%; max-height: 100%;" class="p-4 esl-scrollable-content" esl-drag-to-scroll="">
    <div style="min-width: 50vw">
      <h2>Horizontal scroll appears only if content is too long for the area (resize the section by dragging the lower right corner)</h2>
      <!-- paragraph x10 -->
    </div>
  </div>
  <esl-scrollbar class="scrollbar-blue" target="::prev(.esl-scrollable-content)"></esl-scrollbar>
  <esl-scrollbar class="scrollbar-blue scrollbar-second" target="::prev(.esl-scrollable-content)" horizontal=""></esl-scrollbar>
</section>

import { ESLScrollbar, ESLDragToScrollMixin } from '@exadel/esl';

ESLScrollbar.register();
ESLDragToScrollMixin.register();