DeprivedDevs/deprived-main-website
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

awesome scrollbar
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
Details

Browse source
This commit is contained in:
BOTAlex 2025-08-20 01:55:02 +02:00
parent c6c2e2e31c
commit c099b9ce9f
2 changed files with 88 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/pages/shop/_art_test.svelte
View file

@ -7,7 +7,7 @@
<div class="flex flex-col items-center justify-center w-full h-full"> <div class="flex flex-col items-center justify-center w-full h-full">
<div class="flex flex-col w-72"> <div class="flex flex-col w-72">
<div class="w-full h-72 bg-lime-200"></div> <div class="w-full h-72 bg-lime-200"></div>
<CustomScrollBar overflowX="scroll" overflowY="hidden" Class="h-32"> <CustomScrollBar overflowX="scroll" overflowY="hidden" Class="h-26">
<div class="flex w-full gap-4"> <div class="flex w-full gap-4">
{#each { length: 4 } as i} {#each { length: 4 } as i}
<img <img

120
src/routes/comps/CustomScrollBar.svelte
View file

@ -7,17 +7,19 @@
// Visual tuning // Visual tuning
export let thickness = 12; // px export let thickness = 12; // px
export let padding = 6; // px, space around track inside the overlay export let padding = 0; // px, space around track inside the overlay
export let minThumb = 24; // px export let minThumb = 24; // px
export let contentPadding = 16; // px, inner padding for your content export let contentPadding = 16; // px, inner padding for your content
export let Class = ""; // Extra classes for the scrollbar export let Class = ""; // Extra classes for the scrollbar
// Styling (customize freely) // Styling (customize freely)
export let trackGradient = export let trackStyle = "";
"linear-gradient(180deg, #7aa2ff, #b57cff 40%, #ff84a3)"; export let trackClass = "";
export let trackOpacity = 0.55; export let trackOpacity = 0.55;
export let thumbClass = export let thumbClass =
"bg-neutral-900/90 shadow-[inset_0_0_0_1px_rgba(255,255,255,0.2)]"; "bg-black border-x-1 opacity-50 border-white text-xs text-center text-opacity-50 overflow-hidden flex items-center text-nowrap justify-center";
export let thumbLength = 20; // px. doesn't work for some reason, idk
let viewport: HTMLDivElement; let viewport: HTMLDivElement;
let vBar: HTMLDivElement; // vertical bar container let vBar: HTMLDivElement; // vertical bar container
@ -266,6 +268,9 @@
$: pb = contentPadding + (showBarX ? thickness + padding * 2 : 0); $: pb = contentPadding + (showBarX ? thickness + padding * 2 : 0);
</script> </script>
<!-- svelte-ignore element_invalid_self_closing_tag -->
<!-- svelte-ignore a11y_role_has_required_aria_props -->
<!-- Wrapper --> <!-- Wrapper -->
<div class="relative overflow-hidden {Class}"> <div class="relative overflow-hidden {Class}">
<!-- The real, native scrolling area (we hide its native scrollbar) --> <!-- The real, native scrolling area (we hide its native scrollbar) -->
@ -283,43 +288,44 @@
</div> </div>
</div> </div>
<!-- Vertical overlay bar --> <!-- Vertical overlay bar (mirrors x-scroll structure) -->
{#if showBarY} {#if showBarY}
<div <div
bind:this={vBar} bind:this={vBar}
class="absolute" class="absolute"
style=" style="
top: {padding}px; top: {padding}px;
bottom: {padding}px; bottom: {padding}px;
right: {padding}px; right: {padding}px;
width: {thickness}px; width: {thickness}px;
pointer-events: none; pointer-events: none;
" "
aria-hidden="false" aria-hidden="false"
> >
<div <div class="absolute inset-0 corner-border-container">
class="rounded-full transition-opacity" <div
style=" class="transition-opacity {trackClass} w-full"
position: absolute; inset: 0; style="
background: {trackGradient};
opacity: {trackOpacity};
pointer-events: auto; pointer-events: auto;
{trackStyle}
" "
on:pointerdown={onVTrackPointerDown} on:pointerdown={onVTrackPointerDown}
/> />
</div>
<div <div
bind:this={vThumb} bind:this={vThumb}
role="scrollbar" role="scrollbar"
aria-orientation="vertical" aria-orientation="vertical"
tabindex="0" tabindex="0"
class={`absolute left-[2px] right-[2px] rounded-full cursor-grab active:cursor-grabbing focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-500 ${thumbClass}`} class={`absolute left-[2px] right-[2px] rounded-full cursor-grab active:cursor-grabbing focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-500 ${thumbClass}`}
style="height: 40px; pointer-events: auto; touch-action: none;" style="height: {thumbLength}px; pointer-events: auto; touch-action: none;"
on:pointerdown={onVPointerDown} on:pointerdown={onVPointerDown}
on:pointermove={onVPointerMove} on:pointermove={onVPointerMove}
on:pointerup={endVDrag} on:pointerup={endVDrag}
on:pointercancel={endVDrag} on:pointercancel={endVDrag}
on:keydown={onVKeyDown} on:keydown={onVKeyDown}
/> ></div>
</div> </div>
{/if} {/if}
@ -337,34 +343,36 @@
" "
aria-hidden="false" aria-hidden="false"
> >
<div <div class="absolute inset-0 corner-border-container">
class="rounded-full transition-opacity" <div
style=" class="transition-opacity {trackClass} h-full"
position: absolute; inset: 0; style="
background: {trackGradient};
opacity: {trackOpacity};
pointer-events: auto; pointer-events: auto;
{trackStyle}
" "
on:pointerdown={onHTrackPointerDown} on:pointerdown={onHTrackPointerDown}
/> />
</div>
<div <div
bind:this={hThumb} bind:this={hThumb}
role="scrollbar" role="scrollbar"
aria-orientation="horizontal" aria-orientation="horizontal"
tabindex="0" tabindex="0"
class={`absolute top-[2px] bottom-[2px] rounded-full cursor-grab active:cursor-grabbing focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-500 ${thumbClass}`} class={`absolute top-0 bottom-0 rounded-none cursor-grab active:cursor-grabbing focus-visible:outline focus-visible:outline-2 focus-visible:outline-sky-500 ${thumbClass}`}
style="width: 40px; pointer-events: auto; touch-action: none;" style="width: {thumbLength}px; pointer-events: auto; touch-action: none;"
on:pointerdown={onHPointerDown} on:pointerdown={onHPointerDown}
on:pointermove={onHPointerMove} on:pointermove={onHPointerMove}
on:pointerup={endHDrag} on:pointerup={endHDrag}
on:pointercancel={endHDrag} on:pointercancel={endHDrag}
on:keydown={onHKeyDown} on:keydown={onHKeyDown}
/> >
-------------------------------------------------Scroll-------------------------------------------------
</div>
</div> </div>
{/if} {/if}
</div> </div>
<style> <style lang="scss">
/* Hide the native scrollbars while keeping native scrolling */ /* Hide the native scrollbars while keeping native scrolling */
:global(.csb-viewport) { :global(.csb-viewport) {
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
@ -374,4 +382,50 @@
width: 0; width: 0;
height: 0; /* WebKit */ height: 0; /* WebKit */
} }
.corner-border-container {
--length: 5px;
--width: 1px;
--line-color: #eeeeee;
--background-color: #0002;
background-color: var(--background-color);
background-image:
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color)),
linear-gradient(var(--line-color), var(--line-color));
background-size:
var(--length) var(--width),
var(--width) var(--length),
var(--length) var(--width),
var(--width) var(--length),
var(--length) var(--width),
var(--width) var(--length),
var(--length) var(--width),
var(--width) var(--length);
background-position:
top left,
top left,
top right,
top right,
bottom right,
bottom right,
bottom left,
bottom left;
background-repeat: no-repeat;
border-radius: 0;
& > div {
background: repeating-linear-gradient(
-45deg,
#0000,
#0000 15px,
#fff2 10px 20px
);
}
}
</style> </style>