react 画面外からboxを出すときに横にスクロールできてしまう。

Question

reactを使っています。
buttonを押下したら画面外から青色のBoxを表示させたいです。
Boxが①の状態だと横スクロールできずにbuttonを押したら右からBoxが表示されます。しかし②だと横にスクロールできてしまいます。
なぜなのでしょうか？
わかる人いましたらご教授お願いしたいです。

コードはこちらに記載しました。
https://codesandbox.io/s/nameless-lake-w87fo?file=/src/App.js

①

left: click ? "0" : "-300px"

②

right: click ? "0" : "-300px"

Comments

[k_a]

①と②のうち、質問者様が想定（希望）していた動作はどちらですか？

[ktaaa]

返信ありがとうございます。
①です。
rightの時もleftと同じように横スクロールさせないようにしたいです。

Answer 1

右側(縦方向の場合は下側)に要素をはみ出させたときにスクロールが出現するのは有る種当たり前の動作のように思えます。

viewport上で要素を配置すると、横の場合は右、縦の場合は下方向に積み重なっていきます。左上を原点として領域が拡張されていくイメージです。なので、今回rightで-300px、つまり右方向に300px移動したときに表示領域が拡張されスクロールが現れるのは自然な結果です。

positionやtransformで原点よりマイナスの位置（左・上）に要素を配置したときにその方向に表示領域が拡張されてしまうと全ての位置が崩れます。なのでleftで左方向に300px移動したときにはスクロールが現れないのも自然な結果です。

ではブラウザサイズより右側に要素を移動させたときにスクロールを表示させないためにはどうするかですが、通常overflow-xで隠すのでは無いでしょうか。
下記のコードが最適だとは思えませんが、取り囲む要素をrelativeにしてabsoluteの基準に設定し、overflow-xはhiddenにしてはみ出した要素を表示しない様にしています。

const App: FC = () => {
  const [click, setIsClick] = useState(false);
  return (
    <div
      style={{
        display: "flex",
        justifyContent: "center",
+       position: "relative",
+       height: "100vh",
+       overflowX: "hidden"
      }}
    >
      <div
        style={{
          background: "blue",
          height: "100vh",
          width: "300px",
          position: "absolute",
          right: click ? "0" : "-300px",
+         top: "0px"
        }}
      ></div>
      <button
-       style={{}}
+       style={{ height: "20px" }}
        onClick={() => setIsClick((isClick) => !isClick)}
      >
        click
      </button>
    </div>
  );
};

Comments

[ktaaa]

返信ありがとうございます。
親要素にrelativeをつけないといけないのですね、、、
例えばheaderが一番上にあり、buttonが押されたら右からboxが表示される(headerよりも最前面に)ようにする場合はどうしたらいいのでしょうか？コードを更新しました
https://codesandbox.io/s/nameless-lake-w87fo?file=/src/App.js

[k_a]

ヘッダーも内包したコンテナを定義してそれを親とするんじゃないでしょうか