NOTE: Introduced feature in
v0.4.13
.
IMPORTANT:
overflow_clipping
only detects if the attached element has is clipping on a given axis, not if the scrollbar is visible.
WARNING: This feature can cause performance degradation while enabled.
overflow_clipping
is a Svelte Action, which when IOverflowClippingOptions.enabled: boolean
is true
, runs the IOverflowClippingOptions.on_clip: (entry: {horizontal: boolean, vertical: boolean}) => void
callback. Whenever content is clipping the bounding box of the attached element.
<script>
import {
Box,
Check,
Heading,
Scrollable,
overflow_clipping,
} from "@kahi-ui/framework";
let additional_content = false;
let horizontal_clipping = false;
let vertical_clipping = false;
</script>
<Check
id="overflow-clipping-preview-content"
bind:state={additional_content}
>
Toggle on additional content
</Check>
<Scrollable
actions={[
[
overflow_clipping,
{
enabled: true,
on_clip: (entry) =>
(horizontal_clipping =
entry.horizontal),
},
],
]}
style="width:15rem;"
>
<Box
palette={horizontal_clipping
? "affirmative"
: "negative"}
>
<Heading style="white-space:nowrap;">
Hello World!
{#if additional_content}
And again!
{/if}
</Heading>
</Box>
</Scrollable>
<Scrollable
margin_top="medium"
actions={[
[
overflow_clipping,
{
enabled: true,
on_clip: (entry) =>
(vertical_clipping =
entry.vertical),
},
],
]}
style="height:3rem;"
>
<Box
palette={vertical_clipping
? "affirmative"
: "negative"}
>
<Heading>Hello World!</Heading>
{#if additional_content}
<Heading>And again!</Heading>
{/if}
</Box>
</Scrollable>
Imports
import {overflow_clipping} from "@kahi-ui/framework";
Compatibility
Svelte Actions are always ran on Javascript-enabled Browser. So should not be used for critical end-user functionality, only progressive enhancement.