React + ts realisiert den sekundären Verknüpfungseffekt

 importiere { Komponente, createRef} aus 'react'
 
importiere './index.less'
 
Schnittstelle Status {
  oben: beliebig
  Schaltflächenliste: Schaltfläche[]
  Inhaltsliste: Inhalt[]
  ButtonIndex: Nummer
}
Schnittstelle Schaltfläche {
  ID: Zeichenfolge
  Text: Zeichenfolge
}
Schnittstelle Inhalt {
  ID: Zeichenfolge
  Text: Zeichenfolge
  Höhe: Zahl
  oben: Nummer
}
Schnittstelle Requisiten {
 
}
 
Klasse Treppen erweitert Komponente<Props, State>{
  Linke Liste: Button[]
  RightList: Inhalt[]
  Kaiguan: Boolescher Wert
  rechts = createRef<HTMLDivElement>()
  links = erstelleRef<HTMLDivElement>()
  LeftTex = createRef<HTMLDivElement>()
  // oTop: Zahl | undefiniert
  Ansichtshöhe: Zahl | nicht definiert
  offHeight: Zahl | nicht definiert
  Linker Text = createRef<HTMLDivElement>()
  oben: Zahl | undefiniert
  oTop: Zahl | undefiniert
  Konstruktor(Requisiten: Requisiten) {
    super(Requisiten)
    dieser.Zustand = {
      Schaltflächenliste: [],
      Inhaltsliste: [],
      ButtonIndex: 0,
      oben: 0
    }
    dies.LeftList = []
    dies.RechteListe = []
    dies.kaiguan = wahr
    this.oTop = 0
  }
  componentDidMount() {
    dies.BtnList(20)
    diese.ConList(20)
    dies.setState({
      ButtonList: diese.LeftList,
      Inhaltsliste: this.RightList
    })
  }
  getRandom(m: Zahl, n: Zahl): Zahl {
    gibt parseInt zurück (`${Math.random() * (m - n) + n}`);
  }
  BtnList(n: Zahl) {
    für (sei i = 0; i < n; i++) {
      dies.LeftList.push({
        ID: `a${i}`,
        Text: `Button${i}`,
      });
    }
  }
  ConList(n: Zahl) {
    sei ConTop = 0;
    für (sei i = 0; i < n; i++) {
      Lassen Sie RandomHeight = this.getRandom(736, 1400);
      dies.RightList.push({
        ID: `b${i}`,
        Text: `Titel${i}`,
        Höhe: Zufällige Höhe,
        oben: ConTop,
      });
      ConTop += Zufällige Höhe;
    }
  }
  FnScroll() {
    // konsole.log(11)
    wenn (dies.richtig.aktuell) {
      dies.oTop = dies.right.current.scrollTop;
      wenn (dies.kaiguan) {
        // konsole.log(111)
        lass count = 0
        für (var i = 0; i < dieser.Zustand.Inhaltsliste.Länge; i++) {
          wenn (dieses.oTop >= dieser.zustand.ContentList[i].top) {
            Anzahl = i
          }
          dies.setState({
            ButtonIndex: Anzahl
          })
        }
        // konsole.log(ButtonIndex,Anzahl)
      }
    }
    // eslint-nächste-Zeile deaktivieren
    wenn (dieses.oTop == dieser.Zustand.ContentList[dieser.Zustand.ButtonIndex].top) {
      dies.kaiguan = wahr;
    }
  }
  Fn(index: beliebig, ev: React.MouseEvent<HTMLDivElement>) {
    this.viewHeight = Dokument.documentElement.clientHeight / 2
    let target = ev.target als HTMLDivElement
    dies.offHeight = ziel.offsetTop
    // konsole.log(diese.offHeight)
    wenn (diese.offHeight > diese.viewHeight) {
      wenn (dieses.LeftTex.current) {
        dies.LeftTex.current.scrollTo({
          oben: this.offHeight - this.viewHeight - target.clientHeight / 2,
          Verhalten: "glatt",
        })
      }
      // konsole.log(dieses.LeftTex.current)
    }
    // Konsole.log(diese.offHeight - diese.viewHeight - Ziel.clientHeight / 2)
    dies.kaiguan = falsch;
    // diese.offHeight = ev.target.offsetTop
    // konsole.log(ev.target)
    wenn (dies.richtig.aktuell) {
      dies.rechts.aktuelles.scrollen({
        oben: diese.RechteListe[index].oben,
        Verhalten: "glatt",
      });
    }
    dies.setState({
      ButtonIndex: Index
    })
  }
  ButtonIndex(index: Zahl) {
    wenn (Index >= 3) {
      wenn (dies.links.aktuell und dieser.Linkstext.aktuell) {
        this.left.current.scrollTop = (Index - 3) * this.Lefttext.current.offsetHeight;
      }
    }
    wenn (Index < 3) {
      wenn (dies.links.aktuell) {
        dies.left.current.scrollTop = 0;
      }
    }
    dies.setState({
      ButtonIndex: Index
    })
  }
 
  rendern() {
    let footList = dieser.Zustand.ButtonList
    zurückkehren (
      <div>
        <div Klassenname = "Über">
          <div Klassenname="scrollen">
            <div Klassenname = "Box1" ref = "Box1"></div>
            <div Klassenname = "Box2" ref = "Box2"></div>
            <div Klassenname="scroll-con" ref="scroll-con">
              <div Klassenname="links" ref={this.LeftTex}>
                <div Klassenname="links-con">
                  {footList.map((Element, Index) =>
                    <div onClick={this.Fn.bind(this, index)} ref={this.Lefttext} className={this.state.ButtonIndex === index ? "ac left-txt" : "left-txt"} key={item.id} >
                      {item.text}
                    </div>
                  )}
                </div>
              </div>
              <div className="rechts" ref={diese.rechts} onScroll={diese.FnScroll.bind(diese)}>
                <div Klassenname="rechts-con">
                  <div
                    Klassenname="right-txt"
                    ref="right-txt">
                    {this.state.ContentList.map((item) =>
                      <div style={{ Höhe: item.height }} className="right-title" key={item.id}>{item.text} </div>
                    )}
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
 
    )
 
  }
 
}
 
Standardtreppe exportieren

.scroll {
  Breite: 100vw;
  Höhe: 100vh;
  Überlauf-y: scrollen;
 
  .box1 {
    Höhe: 300px;
    Hintergrund: #000;
    Breite: 100 %;
  }
  .box2 {
    Höhe: 200px;
    Hintergrund: Tomate;
    Breite: 100 %;
  }
  .box3 {
    Position: -WebKit-Sticky;
    Position: klebrig;
    oben: 0;
    Höhe: 100px;
    Hintergrund: blassviolettrot;
    Z-Index: 999;
    Breite: 100 %;
  }
  .scroll-con {
    Breite: 100vw;
    Höhe: 100vh;
    Position: -WebKit-Sticky;
    Position: klebrig;
    oben: 100px;
    Anzeige: Flex;
    .links,
    .Rechts {
      Höhe: 100vh;
      Überlauf-y: scrollen;
    }
    .links {
      Breite: 20vw;
      .links-txt {
        Breite: 20vw;
        Höhe: 100px;
        Textausrichtung: zentriert;
        Zeilenhöhe: 100px;
        Hintergrund: rot;
      }
      .left-txt.ac {
        Hintergrund: Hellkoralle;
        Z-Index: 999;
      }
    }
    .Rechts {
      Breite: 80vw;
 
 
      .Rechtstitel {
        Breite: 100 %;
        Höhe: 5vh;
        Hintergrund: dunkelblau;
        Farbe: Aqua;
        Zeilenhöhe: 5vh;
      }
    }
  }
}