React betreibt das echte DOM, um dynamisch den Boden auszusaugen

In diesem Artikel wird hauptsächlich das Beispiel vorgestellt, in dem React echtes DOM betreibt, um dynamisches Bottom-Saugen zu erreichen. Der Herausgeber findet es ziemlich gut, daher werde ich es jetzt mit Ihnen teilen und als Referenz verwenden. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Dynamische Bodenabsaugung: Der feste Teil ist zu Beginn auf der Seite fixiert, und wenn die Seite bis zu einem bestimmten Abstand vom unteren Rand gescrollt wird, wird der feste Teil fixiert.

Dies erfordert die Berechnung der Scrolldistanz der Seite. Dies ist sehr einfach zu implementieren, wenn Sie JQuery oder natives JS verwenden. Da die Verwendung von React jedoch nicht den Betrieb von DOM empfiehlt, kann dieser Effekt nicht erzielt werden, wenn Sie Virtual verwenden DOM. Daher ist es immer noch notwendig, js einzuführen, um das DOM direkt für den Betrieb zu erhalten.

react schließt das Rendern der Seite nach „componentDidMount“ ab, sodass Sie die nativen Methoden von js direkt verwenden können, um DOM-Elemente abzurufen und dann Vorgänge auszuführen.

componentDidMount() {
 this.changeFixed()
}
//計算高度
changeFixed(){
 //getDOMNode
 const layoutNode = document.querySelectorAll('.page-layout')[0];
 const orderPriceNode = document.querySelectorAll('.test-price')[0];
 window.addEventListener('scroll', function (e) {
  const windowInnerHeight = window.innerHeight;
  const layoutNodeHeight = layoutNode.offsetHeight;
  //滚动超出视野距离
  let scrollTop = window.pageYOffset|| document.documentElement.scrollTop || document.body.scrollTop;
  const distanceBottom = layoutNodeHeight - scrollTop - windowInnerHeight;
  //120的时候吸底
  if(distanceBottom <= 120){
   orderPriceNode.classList.remove(&#39;fixed&#39;);
  }else{
   orderPriceNode.classList.add(&#39;fixed&#39;);
  }
 })
}

Auf diese Weise wird der Boden angesaugt, wenn der Abstand vom Boden 120 beträgt

Verwandte Empfehlungen:

Detaillierte Beispiele für den Unterschied zwischen leeren und entfernen basierend auf DOM

Beispiele zum Teilen von JQuery-Selektor- und DOM-Knoten-Betriebsübungen

js Advanced-Ergänzung für DOM-Ereignisse

Das obige ist der detaillierte Inhalt vonReact betreibt das echte DOM, um dynamisch den Boden auszusaugen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!