perf: improve smooth scrolling performance

package.json

@@ -1,6 +1,6 @@
 {
   "name": "Miru",
-  "version": "4.1.7",
+  "version": "4.1.8",
   "author": "ThaUnknown_ <ThaUnknown@users.noreply.github.com>",
   "description": "Stream anime torrents, real-time with no waiting for downloads.",
   "main": "build/main.js",

src/renderer/components/cards/EpisodeCard.svelte

@@ -13,7 +13,7 @@
   {#if preview}
     <EpisodePreviewCard {data} />
   {/if}
-  <div class='item d-flex flex-column h-full pointer'>
+  <div class='item d-flex flex-column h-full pointer content-visibility-auto'>
     <div class='image h-200 w-full position-relative rounded overflow-hidden d-flex justify-content-between align-items-end text-white' class:bg-black={episodeThumbnail === ' '}>
       <img loading='lazy' src={episodeThumbnail} alt='cover' class='cover-img w-full h-full position-absolute' style:--color={data.media?.coverImage?.color || '#1890ff'} />
       <div class='pl-10 pb-10 material-symbols-outlined filled z-10'>play_arrow</div>
@@ -67,7 +67,8 @@
   }
   .item {
     animation: 0.3s ease 0s 1 load-in;
-    width: 36rem
+    width: 36rem;
+    contain-intrinsic-height: 25.7rem;
   }
   .cover-img {
     object-fit: cover;

src/renderer/components/cards/EpisodeSkeletonCard.svelte

@@ -1,4 +1,4 @@
-<div class='d-flex pt-20 px-20 position-relative wrapper'>
+<div class='d-flex pt-20 px-20 position-relative wrapper content-visibility-auto'>
   <div class='item d-flex flex-column h-full'>
     <div class='image h-200 w-full rounded skeloader bg-dark-light' />
     <div class='row pt-15'>
@@ -20,5 +20,6 @@
   }
   .wrapper {
     height: 27.7rem;
+    contain-intrinsic-height: 27.7rem;
   }
 </style>

src/renderer/components/cards/FullCard.svelte

@@ -15,7 +15,7 @@
   {#if preview}
     <PreviewCard {media} />
   {/if}
-  <div class='card m-0 p-0 overflow-hidden pointer'
+  <div class='card m-0 p-0 overflow-hidden pointer content-visibility-auto'
     style:--color={media.coverImage.color || '#1890ff'}>
     <div class='row h-full'>
       <div class='col-4'>
@@ -86,6 +86,7 @@
   width: 50rem !important;
   height: 27rem !important;
   box-shadow: rgba(0, 4, 12, 0.3) 0px 7px 15px, rgba(0, 4, 12, 0.05) 0px 4px 4px;
+  contain-intrinsic-height: 27rem;
 }
 .card-grid {
   display: grid;

src/renderer/components/cards/FullSkeletonCard.svelte

@@ -1,4 +1,4 @@
-<div class='d-flex px-20 py-10 position-relative'>
+<div class='d-flex px-20 py-10 position-relative content-visibility-auto'>
   <div class='card m-0 p-0 overflow-hidden'>
     <div class='row h-full'>
       <div class='col-4 skeloader bg-dark-light' />
@@ -16,5 +16,6 @@
     animation: 0.3s ease 0s 1 load-in;
     width: 50rem !important;
     height: 27rem !important;
+    contain-intrinsic-height: 27rem;
   }
 </style>

src/renderer/components/cards/SkeletonCard.svelte

@@ -1,4 +1,4 @@
-<div class='d-flex p-20 wrapper'>
+<div class='d-flex p-20 wrapper content-visibility-auto'>
   <div class='item d-flex flex-column h-full'>
     <div class='img w-full rounded skeloader bg-dark-light' />
     <div class='skeloader rounded bg-dark-light h-10 w-150 mt-15' />
@@ -16,5 +16,6 @@
   }
   .wrapper {
     height: 40.6rem;
+    contain-intrinsic-height: 40.6rem;
   }
 </style>

src/renderer/components/cards/SmallCard.svelte

@@ -15,7 +15,7 @@
   {#if preview}
     <PreviewCard {media} />
   {/if}
-  <div class='item d-flex flex-column h-full pointer'>
+  <div class='item d-flex flex-column h-full pointer content-visibility-auto'>
     <img loading='lazy' src={media.coverImage.extraLarge || ''} alt='cover' class='cover-img w-full rounded' style:--color={media.coverImage.color || '#1890ff'} />
     <div class='text-white font-weight-very-bold font-size-16 pt-15 title overflow-hidden'>
       {#if media.mediaListEntry?.status}
@@ -50,7 +50,8 @@
   }
   .item {
     animation: 0.3s ease 0s 1 load-in;
-    width: 19rem
+    width: 19rem;
+    contain-intrinsic-height: 36.7rem;
   }
   .cover-img {
     object-fit: cover;

src/renderer/css.css

@@ -100,6 +100,10 @@ img[src=''], img[src=' '] {
   animation: 0.3s ease 0s 1 root-load-in;
 }
 
+.content-visibility-auto {
+  content-visibility: auto;
+}
+
 .nav-hidden > .content-wrapper {
   left: 0 !important;
   width: 100% !important;

src/renderer/modules/scroll.js

@@ -1,6 +1,7 @@
 export default function scroll (t, { speed = 120, smooth = 15 } = {}) {
   let moving = false
-  let pos = t.scrollTop
+  let pos = 0
+  let scrollTop = 0
   t.addEventListener('wheel', e => {
     e.preventDefault()
 
@@ -8,10 +9,23 @@ export default function scroll (t, { speed = 120, smooth = 15 } = {}) {
     if (!moving) update()
   }, { capture: true, passive: false })
 
-  function update () {
-    const delta = pos - t.scrollTop === smooth * 2 ? 0 : ((pos - t.scrollTop) / smooth)
+  let scrollBar = false
 
-    t.scrollTop += delta
+  t.addEventListener('pointerdown', e => {
+    if (e.offsetX > t.clientWidth) scrollBar = true
+  })
+
+  t.addEventListener('pointerup', () => { scrollBar = false })
+
+  t.addEventListener('scroll', () => {
+    if (scrollBar) pos = scrollTop = t.scrollTop
+  }, { capture: false, passive: true })
+
+  function update () {
+    const delta = pos - scrollTop === smooth * 2 ? 0 : ((pos - scrollTop) / smooth)
+    scrollTop += delta
+
+    t.scrollTo(0, scrollTop)
     moving = Math.abs(delta) > 0.5 && requestAnimationFrame(update)
   }
 }