東京・小金井市のWEB制作会社の豆知識

MEMORANDUM

スマートフォンで「overflow-x」が効かない時の対処法

スライドアニメーションの使用等で画面全体をマスクしたい時に、「overflow-x」を使用するのですが、スマートフォンではうまく行かなったので対処方法をメモ。

<body>
<main class="overflow ">
…
</main>
</body>

.overflow {
	overflow-x: hidden;
}

スマートフォンではパソコンと異なり「body」タグには「overflow-x」が適応できません。
そのため直下に別のタグ（例はmainタグ）を作成して、そちらにクラスを設定しています。

このようなお悩みはありませんか？

「まだアイデアだけだけど、意見を聞いてみたい…」そんなご状況下でのご相談も受け付けております。
過去の実績等を参考に、ご要望に近づけるホームページをご提案いたします。

片寄輝生: 株式会社衆代表/クリエイター; 実務20年。
Web制作全般に携わり、企画・設計から運用まで一貫して対応。
現場で得た知見をもとに、実践的な内容を中心に発信しています。

RANKING