bootstrap scrollspy in vue 模板

[gitakachan]

參考： https://getbootstrap.com/docs/5.0/components/scrollspy/#via-data-attributes https://derek-ji.medium.com/scrollspy-in-angular-react-or-vue-js-785991afe8bc https://github.com/gitakachan/vue-project-collections-and-issues/issues/17

• class="pt-6" 有改bootstrap的variales.scss （ 6: $spacer * 5,）

<template>
  <div class="container py-5">
    <h1 class="text-center bg-light py-5">Heading</h1>
    <div class="row" data-spy="scroll" data-target=".navbar" data-offset="50">
      <div class="col-md-3">
        <div class="h-100 pt-6">
          <nav
            ref="introNav"
            id="introNav"
            class="navbar introNav navbar-light bg-light flex-column align-items-stretch p-3"
          >
            <nav class="nav nav-pills flex-column">
              <a
                @click.prevent="returnTop(this.$refs.one)"
                class="nav-link"
                href="#item-1"
                >Item 1</a
              >
              <nav class="nav nav-pills flex-column">
                <a
                  @click.prevent="returnTop(this.$refs.oneOne)"
                  class="nav-link ms-3 my-1"
                  href="#item-1-1"
                  >Item 1-1</a
                >
                <a
                  @click.prevent="returnTop(this.$refs.oneTwo)"
                  class="nav-link ms-3 my-1"
                  href="#item-1-2"
                  >Item 1-2</a
                >
              </nav>
              <a
                @click.prevent="returnTop(this.$refs.two)"
                class="nav-link"
                href="#item-2"
                >Item 2</a
              >
              <a
                @click.prevent="returnTop(this.$refs.three)"
                class="nav-link"
                href="#item-3"
                >Item 3</a
              >
              <nav class="nav nav-pills flex-column">
                <a
                  @click.prevent="returnTop(this.$refs.threeOne)"
                  class="nav-link ms-3 my-1"
                  href="#item-3-1"
                  >Item 3-1</a
                >
                <a
                  @click.prevent="returnTop(this.$refs.threeTwo)"
                  class="nav-link ms-3 my-1"
                  href="#item-3-2"
                  >Item 3-2</a
                >
              </nav>
            </nav>
          </nav>
        </div>
      </div>

      <div class="col-md-9">
        <div
          data-bs-spy="scroll"
          data-bs-target="#navbar-example3"
          data-bs-offset="0"
          tabindex="0"
        >
          <div class="pb-3">
            <h4 ref="one" class="pt-6" id="item-1">Item 1</h4>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum
              autem dolor quidem quisquam suscipit quod enim? Ullam vel, quidem
              facilis, ex alias modi expedita exercitationem corporis omnis
              molestiae quia necessitatibus aliquam neque provident debitis.
              Quas labore officiis soluta ipsum, veritatis enim tenetur
              repellendus fugit non quod earum odit ipsa officia assumenda quo
              cum maxime accusamus a nam ad alias accusantium. Dolorem culpa
              magni quae a itaque, expedita dolorum adipisci natus maxime eaque
              assumenda obcaecati voluptas quod corrupti cum accusamus corporis
              libero quas nemo nobis. Reprehenderit voluptate architecto
              accusantium reiciendis aliquid porro officia aperiam perferendis
              maiores soluta repudiandae fugiat iste omnis laboriosam, incidunt
              consectetur quos molestias iure deserunt eius impedit? Iure
              excepturi quis provident pariatur, deleniti cumque asperiores rem,
              tenetur ipsam dolorum hic. Aspernatur consequatur porro quasi
              quam, quos molestiae. Voluptate recusandae a aliquid repudiandae.
              Non ea eum sit neque aliquam quis autem tempora dignissimos
              quibusdam perferendis placeat id itaque, excepturi, laudantium a.
              Illo dolor voluptatem, numquam, eaque quod magni a voluptates ut
              laudantium dolorum et aperiam ab omnis quis tempora. Modi
              voluptatum quos inventore recusandae illo, error non cum officiis
              hic corrupti totam eveniet corporis debitis fugit harum nostrum
              quasi dignissimos molestiae architecto vitae distinctio adipisci
              assumenda? Error, libero. Ducimus!
            </p>
          </div>
          <div class="py-3">
            <h5 ref="oneOne" class="pt-6" id="item-1-1">Item 1-1</h5>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae
              repudiandae sed eaque tempore. Suscipit dolorem repudiandae,
              laboriosam delectus perferendis, ipsa dolor quibusdam dignissimos
              dolores consequatur eum vitae fuga totam modi debitis. Dignissimos
              dolores aperiam aut a nisi animi amet porro corporis quisquam
              suscipit ratione, architecto quas enim, doloribus blanditiis
              accusamus, nemo doloremque dicta illo rerum earum aliquam
              consequatur nulla labore. Voluptate, dolorum praesentium. Veniam
              at exercitationem quasi totam accusantium, possimus eligendi
              eveniet ea, voluptatum, ratione quos accusamus tempore rem nulla
              sed alias ab. Rerum, aperiam obcaecati! Distinctio asperiores quia
              a iure reprehenderit, repellat reiciendis temporibus nulla at aut?
              Illo, assumenda?
            </p>
          </div>
          <div class="py-3">
            <h5 ref="oneTwo" class="pt-6" id="item-1-2">Item 1-2</h5>
            <p>
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quia
              totam, doloremque quas perferendis mollitia ea harum assumenda
              doloribus ut! Cupiditate fugiat iusto laboriosam, incidunt
              voluptates labore, dolorem voluptatibus dolorum aut, qui rerum!
              Velit magnam officia labore autem inventore placeat unde
              consequuntur earum deserunt eligendi dolorum, distinctio quae
              aspernatur quis modi, iure ipsa. Odit autem voluptatum, deleniti
              quas harum fugit architecto earum tenetur amet dolores. Vel
              reiciendis earum nam temporibus nostrum dolorem excepturi
              provident veniam obcaecati, illum non tenetur inventore aliquam
              odit iusto dolore, deserunt omnis natus voluptas minus. Aut nulla
              blanditiis eaque ab enim ut consectetur perferendis excepturi odio
              quibusdam.
            </p>
          </div>
          <div class="py-3">
            <h4 ref="two" class="pt-6" id="item-2">Item 2</h4>
            <p>
              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro
              laboriosam qui consectetur molestiae unde adipisci ea, incidunt
              sapiente illo numquam atque officia, delectus vero dignissimos
              architecto. Consequatur perferendis autem sapiente tempore magni
              repellendus dolores nostrum libero quisquam dolorum corrupti,
              itaque esse iure. Distinctio, blanditiis. Optio distinctio unde
              perspiciatis esse recusandae!
            </p>
          </div>
          <div class="py-3">
            <h4 ref="three" class="pt-6" id="item-3">Item 3</h4>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat,
              dicta eos? Fugiat, magni. Atque, excepturi sequi pariatur dolorum
              quos reiciendis.
            </p>
          </div>
          <div class="py-3">
            <h5 ref="threeOne" class="pt-6" id="item-3-1">Item 3-1</h5>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              Consectetur, quos!
            </p>
          </div>
          <div class="py-3">
            <h5 ref="threeTwo" class="pt-6" id="item-3-2">Item 3-2</h5>
            <p>
              Lorem ipsum dolor, sit amet consectetur adipisicing elit.
              Consectetur, quos!
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ScrollSpy from "bootstrap/js/dist/scrollspy.js";
import returnTopMixin from "@/mixins/returnTopMixin.js";

export default {
  name: "VnIntro",
  mixins: [returnTopMixin],
  data() {
    return {
      scrollspy: {},
    };
  },
  mounted() {
    this.scrollSpy = new ScrollSpy(document.body, {
      target: this.$refs.introNav,
    });
  },
};
</script>
<style lang="scss" scoped>
.container {
  .introNav {
    position: sticky;
    top: 90px;
  }
}
</style>

//returnTopMixin
export default {
  methods: {
    returnTop(ref) {
      ref.scrollIntoView(true);
    },
  },
};

[gitakachan]

完整模板（兩個scrollspy: mobile/ labtop）

<template>
  <div class="container py-5">
    <h1 class="text-center bg-light py-5 mb-3 mb-md-6 shadow">
      越南新手旅遊攻略
    </h1>

    <div class="row" data-spy="scroll" data-target=".navbar" data-offset="50">
      <!-- laptopNav -->
      <div class="col-md-3 mb-4 d-none d-md-block">
        <div class="h-100 pt-0">
          <nav
            ref="introNav"
            id="introNav"
            class="navbar introNav navbar-light pt-md-6 bg-light flex-column align-items-stretch p-3"
          >
            <a @click.prevent class="navbar-brand" href="#">快速導覽</a>
            <nav class="nav nav-pills flex-column">
              <a
                @click.prevent="returnTop(this.$refs.one)"
                class="nav-link text-warning"
                href="#item-1"
                >越南簡介</a
              >
              <a
                @click.prevent="returnTop(this.$refs.two)"
                class="nav-link text-warning"
                href="#item-2"
                >環境氣候</a
              >
              <a
                @click.prevent="returnTop(this.$refs.three)"
                class="nav-link text-warning"
                href="#item-3"
                >交通方式</a
              >
              <a
                @click.prevent="returnTop(this.$refs.four)"
                class="nav-link text-warning"
                href="#item-4"
                >飲食特色</a
              >
              <a
                @click.prevent="returnTop(this.$refs.five)"
                class="nav-link text-warning"
                href="#item-5"
                >當地特產</a
              >
            </nav>
          </nav>
        </div>
      </div>

      <div class="col-md-9">
        <!-- mobileNav -->
        <nav
          ref="introNavMobile"
          class="navbar introNavMobile navbar-light bg-light flex-column align-items-stretch px-2 d-md-none"
        >
          <nav class="nav nav-pills">
            <ul class="nav nav-pills align-items-center">
              <li class="nav-item">
                <a
                  @click.prevent="returnTop(this.$refs.one)"
                  class="nav-link text-warning"
                  href="#item-1"
                  ><span class="d-none d-md-block">越南</span>簡介</a
                >
              </li>
              <li class="nav-item">
                <a
                  @click.prevent="returnTop(this.$refs.two)"
                  class="nav-link text-warning"
                  href="#item-2"
                  >環境<span class="d-none d-md-block">氣候</span></a
                >
              </li>
              <li class="nav-item">
                <a
                  @click.prevent="returnTop(this.$refs.three)"
                  class="nav-link text-warning"
                  href="#item-3"
                  >交通<span class="d-none d-md-block">方式</span></a
                >
              </li>
              <li class="nav-item">
                <a
                  @click.prevent="returnTop(this.$refs.four)"
                  class="nav-link text-warning"
                  href="#item-4"
                  >飲食<span class="d-none d-md-block">特色</span></a
                >
              </li>
              <li class="nav-item">
                <a
                  @click.prevent="returnTop(this.$refs.five)"
                  class="nav-link text-warning"
                  href="#item-5"
                  ><span class="d-none d-md-block">當地</span>特產</a
                >
              </li>
            </ul>
          </nav>
        </nav>

        <!-- content -->
        <div
          data-bs-spy="scroll"
          data-bs-target="#navbar-example3"
          data-bs-offset="0"
          tabindex="0"
          class="bg-primary px-4"
        >
          <!-- basic -->
          <div class="pb-3">
            <h2 ref="one" class="pt-8 pt-md-6" id="item-1">越南簡介</h2>
            <div>
              <h3>基本資料</h3>
              <ul>
                <li>簽證：台灣護照入境需簽證，可提前申辦也可落地簽。</li>
                <li>電壓：220V</li>
                <li>時區：台灣與越南之間的時差為1小時。 台灣超前越南1小時。</li>
                <li>
                  匯率：1台幣約可換820越南盾； 1美元約可換22800 越南盾 (2020/
                  09/ 25 更新)。
                </li>
              </ul>
              <p>
                越南位於東南亞中南半島東部沿海，為一社會主義國家。
                除本身民族文化以外，其歷史背景使越南多元融合了中國及法國風情；也因政治因素，共產色彩也是旅客到越南時可以關注的面向。
              </p>

              <h4>推薦景點</h4>
              <ul class="list-unstyled">
                <li>＊ 西貢聖母大教堂：胡志明市標誌性地標</li>
                <li>＊ 戰爭博物館：深度了解越戰歷史</li>
                <li>＊ 會安古城：好逛好拍的古城舊址</li>
              </ul>
            </div>
          </div>
          <!-- nature -->
          <div>
            <h2 ref="two" class="pt-8 pt-md-6" id="item-2">環境氣候</h2>
            <div>
              <p>
                越南國土狹長呈南北縱向，北部除了紅河三角洲以外多為高山，中有安南山脈綿延往下銜接，南部則有富饒的湄公河三角洲，海岸更有數千座大大小小的島嶼座落；除此之外，特殊的石灰岩喀斯特地形，在北部及中部構成壯觀的溶洞和石林等景觀。
              </p>
              <p>
                雖然越南為熱帶氣候國家，但因其豐富的地形，旅客可以在此感受到高山、海洋、炎熱、涼爽等多重體驗，若您在冬天來訪，當南部胡志明市仍值高溫三十五度時，同時北部山區的沙壩卻可能正在飄雪！
              </p>
              <h4>推薦景點</h4>
              <ul class="list-unstyled">
                <li>＊ 下龍灣：越南經典必訪</li>
                <li>＊ 美奈沙丘：讓人感動難忘的日出</li>
                <li>＊ 大叻：高原避暑法式山城</li>
                <li>＊ 沙壩：冬寒夏涼各有風情</li>
              </ul>
            </div>
          </div>
          <!-- transportation -->
          <div class="py-3">
            <h2 ref="three" class="pt-8 pt-md-6" id="item-3">交通方式</h2>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat,
              dicta eos? Fugiat, magni. Atque, excepturi sequi pariatur dolorum
              quos reiciendis.
            </p>
          </div>
          <!-- food -->
          <div class="py-3">
            <h2 ref="four" class="pt-8 pt-md-6" id="item-4">飲食特色</h2>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat,
              dicta eos? Fugiat, magni. Atque, excepturi sequi pariatur dolorum
              quos reiciendis.
            </p>
          </div>
          <!--specialty& souvenior -->
          <div class="py-3">
            <h2 ref="five" class="pt-8 pt-md-6" id="item-5">當地特產</h2>
            <p>
              Lorem ipsum dolor sit, amet consectetur adipisicing elit. Fugiat,
              dicta eos? Fugiat, magni. Atque, excepturi sequi pariatur dolorum
              quos reiciendis.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ScrollSpy from "bootstrap/js/dist/scrollspy.js";
import returnTopMixin from "@/mixins/returnTopMixin.js";

export default {
  name: "VnIntro",
  mixins: [returnTopMixin],
  data() {
    return {
      scrollspy: {},
      scrollspyMobile: {},
    };
  },
  mounted() {
    this.scrollSpy = new ScrollSpy(document.body, {
      target: this.$refs.introNav,
    });
    this.scrollSpyMobile = new ScrollSpy(document.body, {
      target: this.$refs.introNavMobile,
    });
  },
};
</script>
<style lang="scss" scoped>
.container {
  .introNav {
    position: sticky;
    top: 90px;
  }
  .introNavMobile {
    position: sticky;
    top: 50px;
  }
}
</style>