問題の原因と対策
ダイアログを開いた際に、html 要素に overflow="hidden" が設定されるため、スクロールが無効化され、sticky 要素の位置固定が機能しなくなります。以下の方法で、この問題を解決できます。
解決策 1: useEffect を使用して overflow を調整する
useEffect フックを使用して、ダイアログが開かれた際に html の overflow スタイルを調整することで問題を解決できます。
このコードにより、ダイアログが開いている間に html の overflow を visible に設定し、ダイアログが閉じたときに元に戻すことができます。
解決策 2: Dialog にカスタムクラスを追加する
Dialog コンポーネントに drawer クラスを追加し、html 要素のスタイルを CSS で調整する方法も有効です。
そして、以下のような CSS を追加します。
これにより、drawer クラスを持つ要素が存在する場合に、html の overflow が強制的に visible になります。この方法で、sticky 要素が正しく動作するようになります。
注意点
html 要素の overflow を手動で変更する際には、ユーザーのスクロール体験やページ全体のレイアウトに影響を与える可能性があるため、慎重に実装することが重要です。また、overflow を visible に設定することで、ページ全体がスクロール可能になり、意図しない動作を引き起こす可能性があるため、必要に応じて条件分岐や追加のスタイル設定を行ってください。
