iOSエンジニアのつぶやき

毎朝8:30に iOS 関連の技術について1つぶやいています。まれに釣りについてつぶやく可能性があります。

【CSS】overflow-y: visible がスクロールになってしまう

縦方向へのoverflowのみを表示させようと、下記のようにcssを設定していたら、なぜかスクロールできるようになってしまいました。

.container {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
}

まさにこんな感じ。

参照: https://stackoverflow.com/q/15970937

解決策

どうやら片方にvisibleを設定し、もう片方にvisible以外の値を設定すると、visible側の設定はautoに変わってしまうバグのようです。

今回は下記のSolutionに倣って、paddingとmarginを相殺させるように設定したら直りました。

stackoverflow.com

修正版:

.container {
  max-width: 100%;
  overflow-x: hidden;
  overflow-y: visible;
  padding-bottom: 250px;
  margin-bottom: -250px;
}

その他の記事

yamato8010.hatenablog.com

yamato8010.hatenablog.com

yamato8010.hatenablog.com