awesome scrollbar
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
Some checks failed
Rebuild signaller for deprived.dev to rebuild site / test_service (push) Failing after 0s
This commit is contained in:
parent
c6c2e2e31c
commit
c099b9ce9f
2 changed files with 88 additions and 34 deletions
|
|
@ -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,43 +288,44 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Vertical overlay bar -->
|
||||
<!-- Vertical overlay bar (mirrors x-scroll structure) -->
|
||||
{#if showBarY}
|
||||
<div
|
||||
bind:this={vBar}
|
||||
class="absolute"
|
||||
style="
|
||||
top: {padding}px;
|
||||
bottom: {padding}px;
|
||||
right: {padding}px;
|
||||
width: {thickness}px;
|
||||
pointer-events: none;
|
||||
"
|
||||
top: {padding}px;
|
||||
bottom: {padding}px;
|
||||
right: {padding}px;
|
||||
width: {thickness}px;
|
||||
pointer-events: none;
|
||||
"
|
||||
aria-hidden="false"
|
||||
>
|
||||
<div
|
||||
class="rounded-full transition-opacity"
|
||||
style="
|
||||
position: absolute; inset: 0;
|
||||
background: {trackGradient};
|
||||
opacity: {trackOpacity};
|
||||
<div class="absolute inset-0 corner-border-container">
|
||||
<div
|
||||
class="transition-opacity {trackClass} w-full"
|
||||
style="
|
||||
pointer-events: auto;
|
||||
{trackStyle}
|
||||
"
|
||||
on:pointerdown={onVTrackPointerDown}
|
||||
/>
|
||||
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="rounded-full transition-opacity"
|
||||
style="
|
||||
position: absolute; inset: 0;
|
||||
background: {trackGradient};
|
||||
opacity: {trackOpacity};
|
||||
<div class="absolute inset-0 corner-border-container">
|
||||
<div
|
||||
class="transition-opacity {trackClass} h-full"
|
||||
style="
|
||||
pointer-events: auto;
|
||||
{trackStyle}
|
||||
"
|
||||
on:pointerdown={onHTrackPointerDown}
|
||||
/>
|
||||
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>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue