Vue + Element UI realisiert Ankerpositionierung

<el-row :gutter="20">
   <el-col :span="3">
    <!--Navigationsauswahlereignis-->
    <el-menu :default-active="aktiverSchritt" @select="springen">
     <el-menu-item v-for="(item,index) in menuData" :index="`${index}`" :key="item.subjectId">
      <i class="el-icon-menu"></i>
      <span slot="title">{{item.subjectName}}</span>
     </el-Menüelement>
    </el-Menü>
   </el-col>
   <!--Das Binden von Scroll-Ereignissen erfordert Zuhören-->
   <el-col :span="21" class="scroll_cls" @scroll="onScroll">
    <div v-for="(Element, Index) in Tabellenobjekt" :Schlüssel="Index" Stil="Höhe:500px">
     <div Klasse = "Titel Scroll-Element": id = "Element.name">{{Element.name}}</div>
     <el-table :data="item.rows" :key="index">
      <el-table-column label="Seriennummer" type="index" width="50"></el-table-column>
      <el-table-column prop="channelId" label="Kanal-/Team-ID"></el-table-column>
      <el-table-column prop="channelName" label="Kanal/Team"></el-table-column>
      <el-table-column prop="ruleCode" label="Zuteilungsplan-ID"></el-table-column>
      <el-table-column prop="ruleName" label="Name des Zuteilungsplans"></el-table-column>
      <el-table-column prop="ruleVersion" label="Versionsnummer"></el-table-column>
      <el-table-column prop="Hierarchie" label="Ebene">
       <template slot-scope="Umfang">
        <span>{{scope.row.hierarchy == 1 ? 'Projekt' : 'Channel-Team'}}</span>
       </Vorlage>
      </el-Tabellenspalte>
      <el-table-column label="Gültigkeitsdauer">
       <template slot-scope="Umfang">
        <span>{{scope.row.beginTime + '-' + scope.row.endTime}}</span>
       </Vorlage>
      </el-Tabellenspalte>
      <el-table-column prop="Erstellername" label="Betreiber"></el-table-column>
      <el-table-column prop="createTime" label="Betriebszeit"></el-table-column>
      <el-table-column prop="orderCnt" label="Verwandte Reihenfolge">
       <template slot-scope="Umfang">
        <el-Schaltfläche
         @click="orderHandleClick(Umfang.Zeile.orderCnt)"
         Typ="Text"
         Größe="klein"
        >{{scope.row.orderCnt}}</el-button>
       </Vorlage>
      </el-Tabellenspalte>
      <el-table-column label="Vorgang">
       <template slot-scope="Umfang">
        <el-button @click="settingHandleClick(scope.row)" type="text" size="small">Zuteilungsplan festlegen</el-button>
       </Vorlage>
      </el-Tabellenspalte>
     </el-Tabelle>
     <el-pagination
      v-wenn="Artikel.total > 5"
      Stil="Rand oben: 15px"
      Größe="klein"
      @size-change="Größenänderungshandle($Ereignis,Index)"
      @current-change="handleCurrentChange($Ereignis,Index)"
      :current-page="regelForm.Altersnummer"
      :Seitengrößen="[10, 30, 50, 100]"
      :Seitengröße="Regelform.Seitengröße"
      Layout = "Gesamt, Größen, Zurück, Pager, Weiter"
      :total="Artikel.total"
     ></el-pagination>
    </div>
   </el-col>
</el-row>

//Methoden zum Hervorheben der Scroll-Trigger-Schaltfläche: {
  beimScrollen(e) {
            let scrollItems = document.querySelectorAll(".scroll-item");
            console.log(scrollItems)
            console.log(e)
   für (let i = scrollItems.length - 1; i >= 0; i--) {
    // Beurteilen Sie, ob die Bildlaufdistanz der Bildlaufleiste größer ist als die Bildlaufdistanz des aktuellen Bildlaufelements. let judge =
     e.target.scrollTop >=
     scrollItems[i].offsetTop - scrollItems[0].offsetTop;
    wenn (Richter) {
                    Konsole.log(i)
     this.activeStep = i.toString();
     brechen;
    }
   }
  },
  Sprung(Index) {
            konsole.log(index)
   : Lassen Sie das Ziel = document.querySelector(".scroll_cls");
   let scrollItems = document.querySelectorAll(".scroll-item");
   // Bestimmen Sie, ob die Bildlaufleiste nach unten gescrollt ist, wenn (target.scrollHeight <= target.scrollTop + target.clientHeight) {
                konsole.log(index)
                console.log(Indextyp)
    dieser.aktiverSchritt = 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)
            console.log(gesamt)
            let distance = document.querySelector(".scroll_cls").scrollTop; // Der Abstand zwischen der Bildlaufleiste und der Oberseite des Bildlaufbereichs console.log(distance)
   // 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 Bildlaufanimation. Verwenden Sie die setTimeout-Rekursion, um einen reibungslosen Bildlauf zu erzielen. Teilen Sie die Distanz in 50 kleine Segmente auf und scrollen Sie alle 10 ms einmal. // Berechnen Sie die Distanz jedes kleinen Segments. let step = total / 50;
   if (Gesamt > Entfernung) {
    smoothDown(document.querySelector(".scroll_cls"));
   } anders {
    let newTotal = Entfernung - Gesamt;
    Schritt = neuesGesamt / 50;
    smoothUp(document.querySelector(".scroll_cls"));
   }

   // Parameter Element ist der Scrollbereich Funktion smoothDown(element) {
    wenn (Entfernung < Gesamt) {
     Entfernung += 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) {
     Entfernung -= Schritt;
     element.scrollTop = Abstand;
     setTimeout(smoothUp.bind(dieses, Element), 10);
    } anders {
     element.scrollTop = insgesamt;
    }
   }

   document.querySelectorAll('.scroll-item').forEach((item, index1) => {
     wenn (Index === Index1) {
       Element.scrollIntoView({
         Block: "Start",
         Verhalten: ‚glatt‘
       })
     }
   })
  },
  },
 montiert() {
       dies.$nextTick(() => {
           console.log(1)
           window.addEventListener('scrollen', this.onScroll,true)
       })
    },

.scroll_cls {
    Höhe: 500px;
 Überlauf: automatisch;
}