Maison > interface Web > js tutoriel > le corps du texte

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

小云云
Libérer: 2018-01-04 10:24:45
original
1651 Les gens l'ont consulté

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;);
  }
 })
}
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!