mirror of
https://github.com/aleksilassila/reiverr.git
synced 2026-04-21 16:25:11 +02:00
42 lines
953 B
Svelte
42 lines
953 B
Svelte
<script lang="ts">
|
|
import classNames from 'classnames';
|
|
import { onMount } from 'svelte';
|
|
import Container from '../../../Container.svelte';
|
|
|
|
let element: Container;
|
|
let scrollX = 0;
|
|
let maxScrollX = 0;
|
|
let fadeLeft = false;
|
|
let fadeRight = true;
|
|
|
|
$: {
|
|
fadeLeft = scrollX > 10;
|
|
fadeRight = scrollX < maxScrollX - 10;
|
|
}
|
|
|
|
function updateScrollPosition() {
|
|
scrollX = element.scrollLeft;
|
|
maxScrollX = element.scrollWidth - element.clientWidth;
|
|
}
|
|
|
|
onMount(() => {
|
|
updateScrollPosition();
|
|
});
|
|
</script>
|
|
|
|
<Container
|
|
direction="horizontal"
|
|
class={classNames(
|
|
$$restProps.class,
|
|
'overflow-x-auto scrollbar-hide relative p-1 overflow-y-visible'
|
|
)}
|
|
style={`mask-image: linear-gradient(to right, transparent 0%, ${
|
|
fadeLeft ? '' : 'black 0%, '
|
|
}black 5%, black 95%, ${fadeRight ? '' : 'black 100%, '}transparent 100%);`}
|
|
on:scroll={updateScrollPosition}
|
|
bind:this={element}
|
|
let:focusIndex
|
|
>
|
|
<slot {focusIndex} />
|
|
</Container>
|