fix(web): scrollbar (#3536)

web/src/lib/components/photos-page/asset-grid.svelte

@@ -8,10 +8,7 @@
   import AssetViewer from '../asset-viewer/asset-viewer.svelte';
   import IntersectionObserver from '../asset-viewer/intersection-observer.svelte';
   import Portal from '../shared-components/portal/portal.svelte';
-  import Scrollbar, {
-    OnScrollbarClickDetail,
-    OnScrollbarDragDetail,
-  } from '../shared-components/scrollbar/scrollbar.svelte';
+  import Scrollbar from '../shared-components/scrollbar/scrollbar.svelte';
   import AssetDateGroup from './asset-date-group.svelte';
   import MemoryLane from './memory-lane.svelte';
 
@@ -30,13 +27,13 @@
   export let assetInteractionStore: AssetInteractionStore;
 
   const { assetSelectionCandidates, assetSelectionStart, selectedAssets, isMultiSelectState } = assetInteractionStore;
-
-  let { isViewing: showAssetViewer, asset: viewingAsset } = assetViewingStore;
-
   const viewport: Viewport = { width: 0, height: 0 };
-  let assetGridElement: HTMLElement;
+  let { isViewing: showAssetViewer, asset: viewingAsset } = assetViewingStore;
+  let element: HTMLElement;
   let showShortcuts = false;
 
+  $: timelineY = element?.scrollTop || 0;
+
   const onKeyboardPress = (event: KeyboardEvent) => handleKeyboardPress(event);
 
   onMount(async () => {
@@ -84,7 +81,7 @@
   }
 
   function handleScrollTimeline(event: CustomEvent) {
-    assetGridElement.scrollBy(0, event.detail.heightDelta);
+    element.scrollBy(0, event.detail.heightDelta);
   }
 
   const navigateToPreviousAsset = async () => {
@@ -101,26 +98,18 @@
     }
   };
 
-  let lastScrollPosition = 0;
   let animationTick = false;
 
   const handleTimelineScroll = () => {
-    if (!animationTick) {
-      window.requestAnimationFrame(() => {
-        lastScrollPosition = assetGridElement?.scrollTop;
-        animationTick = false;
-      });
-
-      animationTick = true;
+    if (animationTick) {
+      return;
     }
-  };
 
-  const handleScrollbarClick = (e: OnScrollbarClickDetail) => {
-    assetGridElement.scrollTop = e.scrollTo;
-  };
-
-  const handleScrollbarDrag = (e: OnScrollbarDragDetail) => {
-    assetGridElement.scrollTop = e.scrollTo;
+    animationTick = true;
+    window.requestAnimationFrame(() => {
+      timelineY = element?.scrollTop || 0;
+      animationTick = false;
+    });
   };
 
   const handleArchiveSuccess = (e: CustomEvent) => {
@@ -278,26 +267,23 @@
   <ShowShortcuts on:close={() => (showShortcuts = !showShortcuts)} />
 {/if}
 
-{#if $assetStore.timelineHeight > viewport.height}
-  <Scrollbar
-    {assetStore}
-    scrollbarHeight={viewport.height}
-    scrollTop={lastScrollPosition}
-    on:onscrollbarclick={(e) => handleScrollbarClick(e.detail)}
-    on:onscrollbardrag={(e) => handleScrollbarDrag(e.detail)}
-  />
-{/if}
+<Scrollbar
+  {assetStore}
+  height={viewport.height}
+  {timelineY}
+  on:scrollTimeline={({ detail }) => (element.scrollTop = detail)}
+/>
 
 <!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
 <section
   id="asset-grid"
-  class="scrollbar-hidden mb-4 ml-4 mr-[60px] overflow-y-auto"
+  class="scrollbar-hidden ml-4 mr-[60px] overflow-y-auto pb-4"
   bind:clientHeight={viewport.height}
   bind:clientWidth={viewport.width}
-  bind:this={assetGridElement}
+  bind:this={element}
   on:scroll={handleTimelineScroll}
 >
-  {#if assetGridElement}
+  {#if element}
     {#if showMemoryLane}
       <MemoryLane />
     {/if}
@@ -309,7 +295,7 @@
           let:intersecting
           top={750}
           bottom={750}
-          root={assetGridElement}
+          root={element}
         >
           <div id={'bucket_' + bucket.bucketDate} style:height={bucket.bucketHeight + 'px'}>
             {#if intersecting}