web-dev-qa-db-fra.com

Empêcher le défilement en utilisant CSS sur React composants rendus

Je rend donc un composant via React dans mon html comme ceci:

 <html>
  <body>
    <div id=app>${appHtml}</div>
    <script src="/bundle.js"></script>
  </body>
</html>

Dans mon application, j'ai un bouton burger, que onClick passe en plein écran.

Cependant, le corps peut défiler. J'ajouterais normalement une classe à la balise body et je ferais overflow: hidden pour éviter cela. Cependant, mon composant react est rendu dans la balise body donc je n'ai aucun contrôle sur le basculement des classes basé sur un clic dans un composant react.

Quelqu'un a-t-il des idées/conseils sur la façon dont j'atteindrais ce que je recherche?.

Merci!

javascripthtmlcssreactjs
11
TryingToLearnJS

"Je n'ai aucun contrôle sur le basculement des classes basé sur un clic dans un composant React."

Pas nécessairement vrai!

Il est bon que vous pensiez de manière "réactive" et que vous vous méfiez de la modification du DOM. La principale raison pour laquelle vous voulez éviter de faire de la manipulation DOM est parce qu'elle provoque des conflits entre ce que React essaie de rendre et les changements inconnus que vous essayez peut-être d'apporter. Mais dans ce cas, vous n'êtes pas manipuler le DOM qui React est le rendu, vous manipulez son parent. Dans ce cas, vous seriez tout à fait bien de faire quelque chose comme ceci:

document.body.style.overflow = "hidden"

Ou

document.body.classList.add("no-sroll")

Ou tout ce qui fonctionne. Vous êtes totalement en sécurité car React ne rend le DOM que dans #app et ne se soucie pas de ce qui se passe dans son parent. En fait, de nombreuses applications et sites Web utilisent React dans seulement une petite partie de la page, pour afficher un seul composant ou widget, au lieu d'une application entière.

Cela mis à part, il existe une façon encore meilleure et plus "réactive" de faire ce que vous voulez. Restructurez simplement votre application de telle sorte que le conteneur de défilement se trouve dans votre application React au lieu de body. La structure pourrait ressembler à ceci:

<html>
  <body>
    <div id="app">
      <div id="scroll-container">
        <!-- the rest of your app -->
      </div>
    </div>
  </body>
</html>

Masquer body débordement et body et #app remplit tout l'écran et vous pouvez contrôler si #scroll-container permet le défilement ou pas entièrement dans React.

23
jered

Ce qui précède ne fonctionne pas pour iOS mobile.

body-scroll-lock utilise une combinaison de CSS et JS pour le faire fonctionner pour tous les appareils, tout en conservant la défilement d'un élément cible (par exemple, modal).

c'est à dire. pour iOS, vous devez détecter quand le bas ou le haut d'un élément cible est atteint, puis arrêter complètement le défilement

3
Will Po