專案名稱

GSAP + Smooth scrollbar

1. yarn add smooth-scrollbar

2. yarn add gsap

3. //script
   import Scrollbar from "smooth-scrollbar";
   import { onMounted, ref } from "@vue/runtime-core";
   import gsap from "gsap";
   import ScrollTrigger from "gsap/ScrollTrigger";
   gsap.registerPlugin(ScrollTrigger);
   
   const scroller = vessel.value;
   
   onMounted(() => {
     // Setup
     const scroller = vessel.value;
   
     const bodyScrollBar: any = Scrollbar.init(scroller, {
       damping: 0.1,
       delegateTo: document,
       alwaysShowTracks: true,
     });
   
     ScrollTrigger.scrollerProxy(vessel.value, {
       scrollTop(value) {
         if (arguments.length) {
           bodyScrollBar.scrollTop = value;
         }
         return bodyScrollBar.scrollTop;
       },
     });
   
     bodyScrollBar.addListener(ScrollTrigger.update);
   
     ScrollTrigger.defaults({ scroller: scroller });
   });

4. //html
   
   <div ref="vessel" style="height: 100vh; overflow: auto">
      <div class="min-h-screen">ggg</div>
       <div id="test" class="min-h-screen">ggg</div>
       <div class="min-h-screen">ggg</div>
       <div class="min-h-screen">ggg</div>
       <div class="min-h-screen">ggg</div>
   </div>

• scrollTrigger markers 會導致 smooth scrollbar 出錯

• scrollTrigger doesn't work ， 子元件會先產生完成後才會產生父元件，在 App.vue 內加入一個

<template v-if="isRootLoaded">
      <Header />
      <Section1 />
      <Section2 />
      <Section3 />
      <Section4 />
      <Section5 />
      <Section6 />
      <Footer />
    </template>