だから私はReactを介してhtml
内でコンポーネントをレンダリングします:
<html>
<body>
<div id=app>${appHtml}</div>
<script src="/bundle.js"></script>
</body>
</html>
私のアプリ内にはバーガーボタンがあり、onClick
は全画面表示になります。
ただし、本文はスクロール可能です。通常、body
タグにクラスを追加し、overflow: hidden
これを防ぎます。ただし、reactコンポーネントはbody
タグ内にレンダリングされるため、reactコンポーネント内のクリックに基づいてクラスを切り替えることはできません。
誰もが私が探しているものをどのように達成するかについてのアイデア/アドバイスを持っていますか?.
ありがとう!
「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
がスクロールを許可するかどうかを制御できます。
上記はiOSモバイルでは機能しません。
body-scroll-lock は、CSSとJSの組み合わせを使用して、ターゲット要素(モーダルなど)のスクロール性を維持しながら、すべてのデバイスで機能するようにします。
すなわち。 iOSの場合、ターゲット要素の最下部または最上部に到達したことを検出し、スクロールを完全に停止する必要があります