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 w-72">
<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">
{#each { length: 4 } as i}
<img

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

@ -7,17 +7,19 @@
// Visual tuning
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 contentPadding = 16; // px, inner padding for your content
export let Class = ""; // Extra classes for the scrollbar
// Styling (customize freely)
export let trackGradient =
"linear-gradient(180deg, #7aa2ff, #b57cff 40%, #ff84a3)";
export let trackStyle = "";
export let trackClass = "";
export let trackOpacity = 0.55;
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 vBar: HTMLDivElement; // vertical bar container
@ -266,6 +268,9 @@
$: pb = contentPadding + (showBarX ? thickness + padding * 2 : 0);
</script>
<!-- svelte-ignore element_invalid_self_closing_tag -->
<!-- svelte-ignore a11y_role_has_required_aria_props -->
<!-- Wrapper -->
<div class="relative overflow-hidden {Class}">
<!-- The real, native scrolling area (we hide its native scrollbar) -->
@ -283,7 +288,7 @@
</div>
</div>
<!-- Vertical overlay bar -->
<!-- Vertical overlay bar (mirrors x-scroll structure) -->
{#if showBarY}
<div
bind:this={vBar}
@ -297,29 +302,30 @@
"
aria-hidden="false"
>
<div class="absolute inset-0 corner-border-container">
<div
class="rounded-full transition-opacity"
class="transition-opacity {trackClass} w-full"
style="
position: absolute; inset: 0;
background: {trackGradient};
opacity: {trackOpacity};
pointer-events: auto;
{trackStyle}
"
on:pointerdown={onVTrackPointerDown}
/>
</div>
<div
bind:this={vThumb}
role="scrollbar"
aria-orientation="vertical"
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}`}
style="height: 40px; pointer-events: auto; touch-action: none;"
style="height: {thumbLength}px; pointer-events: auto; touch-action: none;"
on:pointerdown={onVPointerDown}
on:pointermove={onVPointerMove}
on:pointerup={endVDrag}
on:pointercancel={endVDrag}
on:keydown={onVKeyDown}
/>
></div>
</div>
{/if}
@ -337,34 +343,36 @@
"
aria-hidden="false"
>
<div class="absolute inset-0 corner-border-container">
<div
class="rounded-full transition-opacity"
class="transition-opacity {trackClass} h-full"
style="
position: absolute; inset: 0;
background: {trackGradient};
opacity: {trackOpacity};
pointer-events: auto;
{trackStyle}
"
on:pointerdown={onHTrackPointerDown}
/>
</div>
<div
bind:this={hThumb}
role="scrollbar"
aria-orientation="horizontal"
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}`}
style="width: 40px; pointer-events: auto; touch-action: none;"
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: {thumbLength}px; pointer-events: auto; touch-action: none;"
on:pointerdown={onHPointerDown}
on:pointermove={onHPointerMove}
on:pointerup={endHDrag}
on:pointercancel={endHDrag}
on:keydown={onHKeyDown}
/>
>
-------------------------------------------------Scroll-------------------------------------------------
</div>
</div>
{/if}
</div>
<style>
<style lang="scss">
/* Hide the native scrollbars while keeping native scrolling */
:global(.csb-viewport) {
scrollbar-width: none; /* Firefox */
@ -374,4 +382,50 @@
width: 0;
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>