web-dev-qa-db-ja.com

ReactレンダリングされたコンポーネントでCSSを使用したスクロールを防止する

だから私はReactを介してhtml内でコンポーネントをレンダリングします：

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

私のアプリ内にはバーガーボタンがあり、onClickは全画面表示になります。

ただし、本文はスクロール可能です。通常、bodyタグにクラスを追加し、overflow: hiddenこれを防ぎます。ただし、reactコンポーネントはbodyタグ内にレンダリングされるため、reactコンポーネント内のクリックに基づいてクラスを切り替えることはできません。

誰もが私が探しているものをどのように達成するかについてのアイデア/アドバイスを持っていますか？.

ありがとう！

javascripthtmlcssreactjs
11
TryingToLearnJS

「reactコンポーネント内のクリックに基づいてクラスを切り替えることはできません。」

必ずしも真実ではありません！

「React-ful」な方法で考えており、DOMの変更に慎重であることは良いことです。 DOM操作を避けたい主な理由は、Reactがレンダリングしようとしているものと、あなたが行おうとしている未知の変更との間に競合が生じるためです。しかし、この場合、 ReactがレンダリングしているDOMを操作すると、その親を操作します。その場合、次のようなことをすればまったく問題ありません。

document.body.style.overflow = "hidden"

または

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

または何でも動作します。 Reactは#app内でのみDOMをレンダリングし、親で何が起こるかは気にしません。実際、多くのアプリやWebサイトではReactは、アプリ全体ではなく単一のコンポーネントまたはウィジェットをレンダリングするために、ページのごく一部のみで使用します。

それとは別に、あなたが望むことをするための、より良い、より「反応の良い」方法があります。スクロールコンテナがbodyではなくReact app内にあるように、アプリを再構築するだけです。構造は次のようになります。

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

bodyオーバーフローを非表示にし、bodyと#appを画面全体に表示し、React内で#scroll-containerがスクロールを許可するかどうかを制御できます。

23
jered

上記はiOSモバイルでは機能しません。

body-scroll-lock は、CSSとJSの組み合わせを使用して、ターゲット要素（モーダルなど）のスクロール性を維持しながら、すべてのデバイスで機能するようにします。

すなわち。 iOSの場合、ターゲット要素の最下部または最上部に到達したことを検出し、スクロールを完全に停止する必要があります

3
Will Po