Scrollable · Panel

Basic

To implement a custom scrollable content with a fixed height, simply utilize the mv-scrollable custom class. This class is designed to create a improved scrollable area within your HTML document.

<div
  class="mv-scrollable overflow-y-auto h-[320px] p-4 pe-2 w-full rounded-lg border border-border"
>
  <div class="rounded-lg bg-muted w-full grow h-[1000px]"></div>
</div>

Horizontal

Below example demonstrates horizontally scrollable content.

<div class="max-w-full overflow-hidden rounded-lg border border-border p-4">
  <div class="mv-scrollable overflow-x-auto pe-2 w-full">
    <div class="rounded-lg bg-muted grow h-[320px] w-[940px]"></div>
  </div>
</div>

Both Scrollbars

Below example demonstrates a scrollable content with bith horizontal and vertical scrollbars.

<div
  class="mv-scrollable overflow-auto p-4 pe-2 pb-2 h-[320px] w-full rounded-lg border border-border"
>
  <div class="rounded-lg bg-muted grow h-[940px] w-[940px]"></div>
</div>

Auto Height

Footer

<div
  class="flex flex-col w-full h-full rounded-md border border-border overflow-hidden"
>
  <div id="header" class="p-4 font-semibold border-b border-border">Header</div>
  <div
    id="content"
    class="mv-scrollable grow overflow-y-auto p-4 pe-2 w-full"
    data-mv-scrollable="true"
    data-mv-scrollable-height="auto"
    data-mv-scrollable-dependencies="#header,#footer"
    data-mv-scrollable-wrappers="#content"
    data-mv-scrollable-offset="10px"
  >
    <div class="rounded-lg bg-muted w-full grow h-[940px]"></div>
  </div>
  <div id="footer" class="p-4 text-sm border-t border-border">Footer</div>
</div>

With modal

Apply the mv-scrollable-y class to the modal body element to enable vertical scrolling within the scrollable body.

<div>
  <button class="mv-btn" data-mv-modal-toggle="#modal">Show Modal</button>
  <div class="mv-modal" data-mv-modal="true" id="modal">
    <div class="mv-modal-content max-w-[420px] top-[10%]">
      <div class="mv-modal-header">
        <h3 class="mv-modal-title">Modal Title</h3>
        <button
          class="mv-modal-close"
          aria-label="Close modal"
          data-mv-modal-dismiss="#modal"
        >
          <svg
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="2"
            stroke-linecap="round"
            stroke-linejoin="round"
            class="lucide lucide-x"
            aria-hidden="true"
          >
            <path d="M18 6 6 18"></path>
            <path d="m6 6 12 12"></path>
          </svg>
        </button>
      </div>
      <div class="mv-modal-body max-h-[200px] pe-2">
        <div class="rounded-lg bg-muted w-full grow h-[600px]"></div>
      </div>
      <div class="mv-modal-footer justify-end gap-2.5">
        <button
          type="button"
          class="mv-btn mv-btn-secondary"
          data-mv-modal-dismiss="#modal"
        >
          Cancel</button
        ><button class="mv-btn">Submit</button>
      </div>
    </div>
  </div>
</div>

Customization

Customize the scrollbar thumb color to match your design requirements using the CSS variable for default and dark demos using [--tw-scrollbar-thumb-color:red] and [--tw-scrollbar-thumb-color-dark:yellow] classes.

<div
  class="mv-scrollable [--mv-scrollable-thumb-color:red] overflow-y-auto p-4 pe-2 h-[320px] w-full rounded-lg border border-border"
>
  <div class="rounded-lg bg-muted w-full grow h-[940px]"></div>
</div>