fix: nuxt problem with scrollControls (#130)

Tresjs · Jul 12, 2023 · 1739965 · 1739965
1 parent 1cd9276
commit 1739965
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 35 deletions.
diff --git a/playground/src/components/ScrollDemo.vue b/playground/src/components/ScrollDemo.vue
@@ -23,36 +23,39 @@ const { onLoop } = useRenderLoop()
 onLoop(() => {
    if (boxRef.value) {
     boxRef.value.value.rotation.x = progress.value * 10
+    boxRef.value.value.rotation.y = progress.value * 2
    }
 })
 </script>
 <template>
-  <!-- <main>
+  <TresCanvas v-bind="gl" ref="canvasRef" window-size >
+    <TresPerspectiveCamera :position="[0, 2, 5]" />
+    <Stars :radius="1" />
+    <TresGridHelper :args="[10, 10]" />
+
+    <ScrollControls ref="scRef" 
+    v-model="progress"
+    :distance="10"
+    :smooth-scroll="0.1"
+    >
+    <Sphere ref="sphereRef" :scale="0.1" :position="[1, 2, 0]" />
+    <Box ref="boxRef" :scale="0.5" :color="0xff00ff" :position="[-1, 1, 0]" />
+  </ScrollControls>
+  </TresCanvas>
+  <main>
     <section>
       <h1>First section</h1>
     </section>
+
      <section>
       <h2>Second section</h2>
     </section>
     <section>
       <h3 >Third section</h3>
     </section>
-  </main> -->
+  </main>
   <!-- <div class="container"> -->
-    <TresCanvas v-bind="gl" ref="canvasRef" window-size >
-      <TresPerspectiveCamera :position="[0, 2, 5]" />
-      <Stars :radius="1" />
-      <TresGridHelper :args="[10, 10]" />
-
-      <ScrollControls ref="scRef" 
-      v-model="progress"
-      :distance="10"
-      :smooth-scroll="0.1"
-      >
-      <Sphere ref="sphereRef" :scale="0.1" :position="[1, 2, 0]" />
-      <Box ref="boxRef" :scale="0.5" :color="0xff00ff" :position="[-1, 1, 0]" />
-    </ScrollControls>
-    </TresCanvas>
+
   <!-- </div> -->
 </template>
 <style scoped>

diff --git a/src/core/controls/ScrollControls.vue b/src/core/controls/ScrollControls.vue
@@ -144,9 +144,19 @@ watch(
 
       scrollContainer.style[props.horizontal ? 'overflowX' : 'overflowY'] = 'auto'
       scrollContainer.style[props.horizontal ? 'overflowY' : 'overflowX'] = 'hidden'
+      scrollContainer.style.position = 'absolute'
+      scrollContainer.style.width = '100%'
+      scrollContainer.style.height = ' 100%'
+      scrollContainer.style.top = '0'
+      scrollContainer.style.left = ' 0'
       scrollContainer.classList.add('scrollContainer')
 
-      fixed.classList.add('fixedContainer')
+      fixed.style.position = 'sticky'
+      fixed.style.top = '0px'
+      fixed.style.left = '0px'
+      fixed.style.width = '100%'
+      fixed.style.height = '100%'
+      fixed.style.overflow = 'hidden'
       scrollContainer.appendChild(fixed)
 
       fill.style.height = props.horizontal ? '100%' : `${height.value * props.pages}px`
@@ -182,21 +192,3 @@ onLoop(() => {
     <slot />
   </TresGroup>
 </template>
-<style>
-.scrollContainer {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  top: 0px;
-  left: 0px;
-}
-
-.fixedContainer {
-  position: sticky;
-  top: 0px;
-  left: 0px;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-</style>