Vue implementiert Ankerpositionierungsfunktion

<Vorlage>
  <div Klasse="Ankerpunkt">
    <!-- Scrollbereich -->
    <div Klasse="Scroll-Inhalt" @scroll="beimScroll">
      <div class="scroll-item" style="height: 500px;background: #3a8ee6;">Eine Ebene</div>
      <div class="scroll-item" style="height: 500px;background: red;">Zweiter Stock</div>
      <div class="scroll-item" style="height: 500px;background: #42b983">Drei Ebenen</div>
      <div class="scroll-item" style="height: 1000px;background: yellow;">Vier Ebenen</div>
    </div>
    <!-- Schaltfläche -->
    <div Klasse="operation-btn">
      <div v-for="(item, index) in ['Erster Stock','Zweiter Stock','Dritter Stock','Vierter Stock']" :key="index" @click="jump(index)"
           :style="{Hintergrund: activeStep === index ? '#eeeeee' : '#ffffff'}">{{Element}}
      </div>
    </div>
  </div>
</Vorlage>

<style lang="scss" scoped>
  .Ankerpunkt {
    Flex-Basis: 100%;
    Anzeige: Flex;
    Überlauf: versteckt;
    .scroll-Inhalt {
      Höhe: 100%;
      Breite: 90%;
      Überlauf: scrollen;
    }
    .operation-btn {
      Breite: 10%;
      Höhe: 100%;
    }
  }
</Stil>

//Hervorhebung der Scroll-Trigger-Schaltfläche onScroll (e) {
  let scrollItems = document.querySelectorAll('.scroll-item')
  für (let i = scrollItems.length - 1; i >= 0; i--) {
    //Beurteilen, ob die Scroll-Distanz der Bildlaufleiste größer ist als die scrollbare Distanz des aktuellen Scroll-Elements let judge = e.target.scrollTop >= scrollItems[i].offsetTop - scrollItems[0].offsetTop
    wenn (Richter) {
      dieser.activeStep = i
      brechen
    }
  }
},

// Klicken, um den Ankerpunkt zu wechseln. Sprung (Index) {
 let Ziel = Dokument.querySelector('.scroll-content')
 let scrollItems = document.querySelectorAll('.scroll-item')
 // Bestimmen Sie, ob die Bildlaufleiste nach unten gescrollt ist, wenn (target.scrollHeight <= target.scrollTop + target.clientHeight) {
   dieser.activeStep = Index
 }
 let total = scrollItems[index].offsetTop - scrollItems[0].offsetTop // Der Abstand zwischen dem Ankerelement und der Oberseite seines offsetParent (hier ist der Hauptteil) (die zu scrollende Distanz)
 let distance = document.querySelector('.scroll-content').scrollTop // Der Abstand zwischen der Bildlaufleiste und der Oberseite des Bildlaufbereichs // let distance = document.body.scrollTop || document.documentElement.scrollTop || window.pageYOffset // Der Abstand zwischen der Bildlaufleiste und der Oberseite des Bildlaufbereichs (der Bildlaufbereich ist das Fenster)
 // Implementierung der Scroll-Animation. Verwenden Sie die setTimeout-Rekursion, um ein reibungsloses Scrollen zu erreichen. Unterteilen Sie die Distanz in 50 kleine Segmente und scrollen Sie alle 10 ms. // Berechnen Sie die Distanz jedes kleinen Segments. let step = total / 50
 if (Gesamt > Entfernung) {
   smoothDown(Dokument.Abfrageselektor('.scroll-content'))
 } anders {
   let newTotal = Entfernung - Gesamt
   Schritt = newTotal / 50
   smoothUp(Dokument.Abfrageselektor('.scroll-content'))
 }

 // Parameter Element ist der Scrollbereich Funktion smoothDown (Element) {
   wenn (Entfernung < Gesamt) {
     Distanz += Schritt
     element.scrollTop = Abstand
     setTimeout(smoothDown.bind(dieses, Element), 10)
   } anders {
     element.scrollTop = insgesamt
   }
 }

 // Parameter Element ist der Scrollbereich Funktion smoothUp (Element) {
   if (Entfernung > Gesamt) {
     Abstand -= Schritt
     element.scrollTop = Abstand
     setTimeout(smoothUp.bind(dieses, Element), 10)
   } anders {
     element.scrollTop = insgesamt
   }
 }

 // document.querySelectorAll('.scroll-item').forEach((item, index1) => {
 // wenn (index === index1) {
 // Artikel.scrollIntoView({
 // Block: "Start",
 // Verhalten: ‚glatt‘
 // })
 // }
 // })
}