React exploite le vrai DOM pour obtenir une aspiration dynamique du fond

Cet article présente principalement l'exemple de React exploitant un vrai DOM pour obtenir une succion dynamique du fond. L'éditeur pense que c'est plutôt bien, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

Aspiration dynamique du bas : La partie fixe est fixée sur la page au début, et lorsque la page défile à une certaine distance du bas, la partie fixe est fixée.

Cela nécessite de calculer la distance de défilement de la page. C'est très simple à mettre en œuvre si vous utilisez Jquery ou js natif. Cependant, comme l'utilisation de React ne recommande pas d'utiliser le DOM, cet effet ne peut pas être obtenu si vous utilisez du virtuel. DOM. , il faut donc encore introduire js pour obtenir directement le DOM pour le fonctionnement.

react termine le rendu de la page après composantDidMount, vous pouvez donc utiliser directement les méthodes natives js pour obtenir des éléments DOM, puis effectuer des opérations.

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;);
  }
 })
}

De cette façon, lorsque la distance du fond est de 120, le fond est aspiré

Recommandations associées :

Exemples détaillés de la différence entre vide et supprimer basés sur le DOM

Exemples pour partager le sélecteur JQuery et les exercices d'opération de nœud DOM

Supplément js Advanced pour les événements dom

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!