Scroll Clip

Wrap any content inside a Scroll Clip container to create a scrollable area with several options. The main goal is to clip the content by drawing fine lines at the overflowing edges.

Display additional signifiers by setting the signifiers property to inside or outside. Set inidividual icons for each side (signifierTopIcon, SignifierRightIcon, …). Disable scroll bars via scrollbars="false". Set the clip property to one of the values top, right, bottom, left to limit clipping to one side or top and bottom (clip="y") or left and right (clip="x").

You can scroll to any enclosed element on page load by setting the scroll-to property to a valid CSS-selector (eg. scroll-to="#target"). Animate the scroll by setting the scrollToBehavior property to smooth.

'clip' => '', // top | right | bottom | left | y | x
'fit' => false, // shorthand for { position:absolute; inset:0 }
'scrollbars' => true,
'signifiers' => false, // false | inside | outside
'signifierTopIcon' => 'lucide-chevron-up',
'signifierRightIcon' => 'lucide-chevron-right',
'signifierBottomIcon' => 'lucide-chevron-down',
'signifierLeftIcon' => 'lucide-chevron-left',
'scrollTo' => false,
'scrollToBehavior' => 'instant', // smooth | instant
 
<x-scrollClip class="size-[320px]" signifiers="outside">
    <x-checkerBoard class="size-[1000px] m-4" />
</x-scrollClip>

<x-scrollClip class="size-[320px]" signifiers="inside" signifier-top-icon="lucide-dot" signifier-right-icon="lucide-dot" signifier-bottom-icon="lucide-dot" signifier-left-icon="lucide-dot">
    <x-checkerBoard class="size-[1000px] m-4" />
</x-scrollClip>
 
<x-scrollClip class="h-[72px] w-[320px]" scroll-to="#scroll-target" scrollbars="false" signifiers="outside">
    <x-checkerBoard class="h-[72px] w-[1000px] py-0 mx-4 flex gap-8 justify-between">
        <span></span>
        <span></span>
        <span></span>
        <span id="scroll-target" >
            <x-svgIcon name="tabler-flag" />
        </span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </x-checkerBoard>
</x-scrollClip>

Box

 
<x-scrollClip class="h-[72px] w-[320px]" scroll-to="#scroll-target" scrollbars="false" signifiers="outside">
    <x-checkerBoard class="h-[72px] w-[1000px] py-0 mx-4 flex gap-8 justify-between">
        <span></span>
        <span></span>
        <span></span>
        <span id="scroll-target" >
            <x-svgIcon name="tabler-flag" />
        </span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </x-checkerBoard>
</x-scrollClip>