Fix scroll bugs with small collections (#126)

CHANGELOG.md

@@ -7,6 +7,19 @@ and this project theoretically adheres to [Semantic
 Versioning](https://semver.org/spec/v2.0.0.html), but it's still at major
 version zero.
 
+## [v0.17.1] - 2024-11-02 - Scrolling fixes
+
+### Fixed
+
+* Lots of scrolling glitches with just a few photos in collection due to the height not being fully tested
+* Max scrolling position not being always correctly handled
+* The scrolling position sometimes changing 2s after scrolling (due to persistent scrolling glitches)
+* Being able to scroll out of bounds
+
+[v0.17.1]: https://github.com/SmilyOrg/photofield/compare/v0.17.0...v0.17.1
+
+
+
 ## [v0.17.0] - 2024-10-27 - Photo details, dark mode, scrollbar, open in album
 
 ### New

ui/src/components/ScrollViewer.vue

@@ -45,7 +45,7 @@
 
     <div
       class="virtual-canvas"
-      :style="{ height: nativeScrollHeight + 'px' }">
+      :style="{ height: (nativeHeight - 64) + 'px' }">
     </div>
 
     <Scrollbar
@@ -134,11 +134,11 @@ const lastNonNativeView = ref(null);
 let lastLoadedScene = null;
 let lastFocusFileId = null;
 
-const nativeScrollHeight = computed(() => {
-  if (!scene.value?.bounds?.h || !viewport.height.value) {
+const nativeHeight = computed(() => {
+  if (!canvas.value?.height) {
     return 0;
   }
-  return Math.min(100000, scene.value.bounds.h - viewport.height.value);
+  return Math.min(100000, canvas.value.height);
 });
 
 let scrollOffset = 0;
@@ -182,7 +182,6 @@ const {
 );
 
 const focusRegion = computed(() => {
-  if (!focusFileId.value) return null;
   return focusRegions.value?.[0];
 });
 
@@ -280,24 +279,19 @@ const zoomOut = () => {
   viewer.value?.setView(view.value);
 }
 
-const scrollSleep = computed(() => {
-  return !nativeScroll.value || lastZoom.value > 1.0001;
-});
-
-
 const nativeScrollY = ref(window.scrollY);
 function nativeScrollTo(y) {
   window.scrollTo(0, y);
   nativeScrollY.value = y;
 }
 
 function scrollToPixels(y) {
-  const nativeHeight = nativeScrollHeight.value;
-  if (nativeHeight <= 0) {
+  if (nativeHeight.value <= 0) {
     return;
   }
-  const maxOffset = scrollMax.value - nativeHeight + viewport.height.value;
-  const nativeScrollTarget = nativeHeight * 0.5;
+  y = Math.max(0, Math.min(scrollMax.value, y));
+  const maxOffset = Math.max(0, scrollMax.value - nativeHeight.value + viewport.height.value);
+  const nativeScrollTarget = nativeHeight.value * 0.5;
   const ty = y - nativeScrollTarget;
   if (ty < 0) {
     scrollOffset = 0;
@@ -316,13 +310,12 @@ function scrollToPixels(y) {
 
 function updateScrollFromNative(y) {
   const actionDistanceRatio = 0.1;
-  const nativeHeight = nativeScrollHeight.value;
-  if (nativeHeight <= 0) {
+  if (nativeHeight.value <= 0) {
     return;
   }
-  const maxOffset = scrollMax.value - nativeHeight + viewport.height.value;
-  const actionDist = nativeHeight * actionDistanceRatio;
-  const nativeScrollTarget = nativeHeight * 0.5;
+  const maxOffset = Math.max(0, scrollMax.value - nativeHeight.value + viewport.height.value);
+  const actionDist = nativeHeight.value * actionDistanceRatio;
+  const nativeScrollTarget = nativeHeight.value * 0.5;
   const diff = nativeScrollTarget - nativeScrollY.value;
   const ty = y - nativeScrollTarget;
   if (ty < 0) {
@@ -357,7 +350,7 @@ onUnmounted(() => {
 const scrollSpeed = ref(0);
 
 const scrollMax = computed(() => {
-  return canvas.value.height - viewport.height.value;
+  return Math.max(0, canvas.value.height - viewport.height.value);
 });
 
 const scrollRatio = computed(() => {
@@ -393,7 +386,6 @@ watchDebounced(scrollY, async (sy) => {
   if (!scene.value) return;
   if (!view.value || !view.value.w || !view.value.h) return;
   if (sy < 500) {
-    if (!lastFocusFileId) return;
     updateFocusFile(null);
     return;
   }
@@ -404,7 +396,6 @@ watchDebounced(scrollY, async (sy) => {
   );
   const fileId = center?.data?.id;
   if (!fileId) return;
-  lastFocusFileId = fileId;
   updateFocusFile(fileId);
 }, { debounce: 1000 });