It is kinda easy. I replaced the normal scrollbar with a custom one and want to hide it only when I'm not actively scrolling. I was so thinking about conditional CSS but can't succeed to anything.
The issue is mostly since I use svelte and not sveltekit to apply to the whole body I use the ":global(body)" things. It seems to make my whole kinda strange.
Also I have an animation with shapes on the background that need to be still there. Most of my attempts have broke it sadly.
Would any of you have an idea ?
Here is my code :
<script> import { onMount } from "svelte"; import { fade } from "svelte/transition"; import Header from "../components/header.svelte" import CenterBlock from "../components/centerBlock.svelte"; import { linear } from "svelte/easing"; let animate = false let shapes = [ { top: 50, left: 50, deltaX: -1, deltaY: 1 }, { top: 350, left: 1000, deltaX: -1, deltaY: 1 }, { top: 200, left: 500, deltaX: -1, deltaY: 1 }, { top: 650, left: 1100, deltaX: -1, deltaY: 1 }, ]; function updateShapes() { shapes = shapes.map(shape => { let newTop = shape.top + shape.deltaY; let newLeft = shape.left + shape.deltaX; let shapeRadius = 300; // taille des shapes if (newTop <= 0 || newTop >= window.innerHeight - shapeRadius) { shape.deltaY = -shape.deltaY; } if (newLeft <= 0 || newLeft >= window.innerWidth - shapeRadius) { shape.deltaX = -shape.deltaX; } let updatedShape = { top: shape.top + shape.deltaY, left: shape.left + shape.deltaX, deltaX: shape.deltaX, deltaY: shape.deltaY, }; return updatedShape; }); requestAnimationFrame(updateShapes); } onMount(() => { updateShapes(); animate = true });</script>{#if animate}<div transition:fade={{delay: 250, duration: 1000, easing: linear}}><Header/></div><div id="background" transition:fade={{delay:500, duration:5000, easing: linear}}> {#each shapes as shape (shape)}<div class="shape" style={`top: ${shape.top}px; left: ${shape.left}px;`}></div> {/each}</div><CenterBlock/><div style="height: 200vh;"></div>{/if}<style> @import '../css/gambetta.css'; :global(body) { margin: 0; background-color: #151813; } #background { position: fixed; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -1; } .shape { position: absolute; width: 300px; height: 300px; opacity: 0.5; background: radial-gradient(circle, #730d23 40%, transparent 75%); filter: blur(30px); } /* width */ :root::-webkit-scrollbar { width: 10px; } /* Track */ :root::-webkit-scrollbar-track { background: #151813; border-radius: 5px; } /* Handle */ :root::-webkit-scrollbar-thumb { background: #730d23; border-radius: 10px; } /* Handle on hover */ :root::-webkit-scrollbar-thumb:hover { background: #400a15; }</style>