From 9fc8f4ce7021de6ae1bad1528c51bfabff97e427 Mon Sep 17 00:00:00 2001
From: alvarosabu <alvaro.saburido@gmail.com>
Date: Tue, 21 Nov 2023 20:56:11 +0100
Subject: [PATCH] fix: initialize progress value with init scroll

---
 .../src/pages/controls/ScrollControlsDemo.vue |  2 +-
 src/core/controls/ScrollControls.vue          | 31 +++++++++++--------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/playground/src/pages/controls/ScrollControlsDemo.vue b/playground/src/pages/controls/ScrollControlsDemo.vue
index 7489e606..b4bc5eac 100644
--- a/playground/src/pages/controls/ScrollControlsDemo.vue
+++ b/playground/src/pages/controls/ScrollControlsDemo.vue
@@ -25,7 +25,7 @@ const gl = {
 
 useControls('fpsgraph')
 useControls({
-  progress: progress.value,
+  progress,
 })
 
 const { onLoop } = useRenderLoop()
diff --git a/src/core/controls/ScrollControls.vue b/src/core/controls/ScrollControls.vue
index 9a95e1ad..700d6be0 100644
--- a/src/core/controls/ScrollControls.vue
+++ b/src/core/controls/ScrollControls.vue
@@ -82,7 +82,6 @@ const { height, width } = useWindowSize()
 let initCameraPos = 0
 const initialized = ref(false)
 
-const progress = ref(0)
 const progressScroll = ref(0)
 const scrollNodeY = ref(0)
 const direction = props.horizontal ? 'x' : 'y'
@@ -112,21 +111,21 @@ watch(
   },
 )
 
-watch(windowY, (value) => {
-  if (!isScrolling.value && !props.htmlScroll) return
+function updateScroll(value: number) {
   progressScroll.value = (value / height.value / (scrollNodeY.value / height.value - 1))
-  progress.value = -1 * progressScroll.value
   emit('update:modelValue', progressScroll.value)
+}
+
+watch(windowY, (value) => {
+  if (!isScrolling.value && !props.htmlScroll) return
+  updateScroll(value)
 })
 watch(containerY, (value) => {
-  progressScroll.value = (value / height.value / (scrollNodeY.value / height.value))
-  progress.value = -1 * progressScroll.value
-  emit('update:modelValue', progressScroll.value)
+  updateScroll(value)
+
 })
 watch(containerX, (value) => {
-  progressScroll.value = (value / width.value / (scrollNodeY.value / width.value - 1))
-  progress.value = +progressScroll.value
-  emit('update:modelValue', progressScroll.value)
+  updateScroll(value)
 })
 
 watch(
@@ -143,6 +142,8 @@ watch(
         canvas.style.left = '0'
       }
       scrollNodeY.value = document.body.scrollHeight
+      // Init scroll value
+      updateScroll(windowY.value)
     }
     else {
       const fixed = document.createElement('div')
@@ -174,9 +175,13 @@ watch(
         canvas.style.width = '100%'
       }
       scrollContainer.appendChild(fill)
-      value.domElement.parentNode.style.position = 'relative'
-      value?.domElement?.parentNode?.appendChild(scrollContainer)
+      if (value?.domElement?.parentNode) {
+        value.domElement.parentNode.style.position = 'relative'
+        value.domElement.parentNode.appendChild(scrollContainer)
+      }
       scrollNodeY.value = props.horizontal ? width.value * props.pages : height.value * props.pages
+      // Init scroll value
+      updateScroll(props.horizontal ? containerX.value : containerY.value)
     }
   },
   {
@@ -189,7 +194,7 @@ const { onLoop } = useRenderLoop()
 onLoop(() => {
   if (camera.value?.position) {
     const delta
-      = (progress.value * props.distance - camera.value.position[direction] + initCameraPos) * props.smoothScroll
+      = (-progressScroll.value * props.distance - camera.value.position[direction] + initCameraPos) * props.smoothScroll
 
     camera.value.position[direction] += delta
     if (wrapperRef.value.children.length > 0) {