new wrapper

Author: Slgoetz

package.json

@@ -1,6 +1,6 @@
 {
    "name": "nuxt-lenis",
-   "version": "1.0.7",
+   "version": "1.0.8",
    "license": "MIT",
    "type": "module",
    "repository": {
@@ -31,7 +31,7 @@
    },
    "dependencies": {
       "@nuxt/kit": "^3.6.5",
-      "@studio-freight/lenis": "^1.0.30"
+      "@studio-freight/lenis": "1.0.27"
    },
    "devDependencies": {
       "@nuxt/devtools": "^0.8.5",

playground/pages/index.vue

@@ -1,33 +1,33 @@
 <template>
-   <div id="wrapper" ref="wrapper">
-      <lenis
-         id="test"
-         ref="lenisRef"
-         :options="vsOptions"
-         @scroll="scrollEmitter"
-      >
-         <div>
-            <h2>Index Page</h2>
-            <p>Playground for lenis scroll plugin for nuxt</p>
-         </div>
+   <lenis
+      id="wrapper"
+      ref="lenisRef"
+      :options="vsOptions"
+      @scroll="scrollEmitter"
+      @initiated="initiated"
+   >
+      <!-- <div id="content"> -->
+      <div>
+         <h2 @click="stop">STOP</h2>
+         <h2 @click="start">START</h2>
+         <p>Playground for lenis scroll plugin for nuxt</p>
+      </div>
 
-         <div></div>
-         <div></div>
-         <div></div>
-      </lenis>
-   </div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <!-- </div> -->
+   </lenis>
 </template>
 
 <script setup>
 import { ref, reactive, inject, watch, onMounted } from "vue";
 
 const scrollState = inject("scrollState");
-const wrapper = ref(null);
 const lenisRef = ref(null);
+const lenisVs = ref(false);
 const vsOptions = reactive({
-   content: "#test",
-   // duration: 0.2,
-   // direction: "Horizontal",
+   wrapper: "#wrapper",
    touchMultiplier: 20,
    infinite: false,
 });
@@ -43,7 +43,16 @@ watch(vsOptions, (newVal) => {
 const scrollEmitter = (val) => {
    // console.log("scrollEmitter", val);
 };
+const stop = (val) => {
+   console.log("lenisVs", lenisVs.value);
+   lenisVs.value.stop();
+};
+const start = (val) => {
+   console.log("lenisVs", lenisVs.value);
+   lenisVs.value.start();
+};
 
+const initiated = ({ lenis }) => (lenisVs.value = lenis);
 const changeOptions = () => {
    console.log("🐯 changing options");
    vsOptions.duration = vsOptions.duration > 5 ? 0.1 : 10;
@@ -55,17 +64,24 @@ onMounted(() => {
 </script>
 
 <style>
-#test {
-   min-height: 100%;
+/* #test {
    height: auto;
-}
-#test > div {
+} */
+#wrapper div {
    min-height: 50vh;
    margin-bottom: 300px;
-   background: red;
+   background: beige;
    width: 100%;
 }
 
+#wrapper {
+   max-height: 100vh;
+   /* height: auto; */
+   /* pointer-events: none; */
+}
+#content {
+   height: auto;
+}
 .fixed {
    position: fixed;
    top: 100px;

src/runtime/components/lenis.vue

@@ -1,6 +1,7 @@
 <template>
-   <div ref="lenisContent">
-      <slot />
+   <div ref="lenisWrapper">
+      <div v-if="options.wrapper" ref="lenisContent"><slot /></div>
+      <slot v-else />
    </div>
 </template>
 
@@ -24,6 +25,8 @@ export default defineComponent({
       const setLenis = inject("setLenis");
       const lenisVS = ref(0);
       const lenisRaf = ref(null);
+      const mainContent = ref(null);
+      const lenisWrapper = ref(null);
       const lenisContent = ref(null);
 
       /**
@@ -46,15 +49,9 @@ export default defineComponent({
 
       // On mounted set new Lenis instance
       onMounted(() => {
-         if (lenisOptions.value.content) {
-            lenisOptions.value.content = document.querySelector(
-               lenisOptions.value.content
-            );
-         }
          if (lenisOptions.value.wrapper) {
-            lenisOptions.value.wrapper = document.querySelector(
-               lenisOptions.value.wrapper
-            );
+            lenisOptions.value.wrapper = lenisWrapper.value;
+            lenisOptions.value.content = lenisWrapper.value.children[0];
          }
          initLenis();
       });
@@ -107,7 +104,7 @@ export default defineComponent({
       return {
          destroyLenis,
          initLenis,
-         lenisContent,
+         lenisWrapper,
          lenisVS,
       };
    },
@@ -121,6 +118,7 @@ html.lenis {
 
 .lenis.lenis-smooth {
    scroll-behavior: auto !important;
+   overflow: hidden;
 }
 
 .lenis.lenis-smooth [data-lenis-prevent] {
@@ -134,4 +132,7 @@ html.lenis {
 .lenis.lenis-scrolling iframe {
    pointer-events: none;
 }
+#test {
+   width: 90vw;
+}
 </style>

yarn.lock

@@ -1714,10 +1714,10 @@
   resolved "https://registry.yarnpkg.com/@sindresorhus/merge-streams/-/merge-streams-2.2.1.tgz#82b5e1e135ef62ef8b522d6e7f43ad360a69f294"
   integrity sha512-255V7MMIKw6aQ43Wbqp9HZ+VHn6acddERTLiiLnlcPLU9PdTq9Aijl12oklAgUEblLWye+vHLzmqBx6f2TGcZw==
 
-"@studio-freight/lenis@^1.0.30":
-  version "1.0.35"
-  resolved "https://registry.yarnpkg.com/@studio-freight/lenis/-/lenis-1.0.35.tgz#039d1064363306f6554b8d676421db647dffd770"
-  integrity sha512-dduQqZERC5EaJSVGBoCt2WdPFQlr39zFewkQxvJcYZrMl1aVTPPIQCnZMqIjl4KZBQIL3kIXes+HP22T9XVh4w==
+"@studio-freight/lenis@1.0.27":
+  version "1.0.27"
+  resolved "https://registry.yarnpkg.com/@studio-freight/lenis/-/lenis-1.0.27.tgz#1a333e192efa1a036074f7dcffba847d4c45f6d1"
+  integrity sha512-1I6EaWR9rxdFjIJtF52CtETJt9ngfY4AjawrJY5pLxCvHa/lQZ+1v2gTUntwNZkuks6E2It6YEXV6jnpnCZFjA==
 
 "@trysound/sax@0.2.0":
   version "0.2.0"