Google FormsをWEBサイトに埋め込んだら二重スクロールになってしまう問題を解決した！Tips
こんにちは、須那です。
最近WraptasでWEBサイトを管理しています。
その中で、問い合わせフォームを作成する際にGoogle Formsをnotionに埋め込んでWraptasで確認すると二重スクロールが発生してしまうという問題に直面しました。
↓このような形で二重でスクロールが表示されてしまいます。
これだとかなり不便なので、修正していきたいと思います。
notionとWraptas側それぞれで設定が必要
notionでの対応
まずWraptasでGoogleformsを利用するにはnotionにGoogleFormsを埋め込む必要があるので、今回は、iframeタグで埋め込みました。
下記が最初に埋め込んだ際のiframeタグです。
<iframe src="ID" width="640" height="2099" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
二重スクロールを防ぐためには、上記のiframeタグを埋め込む際にwidth、 heightに入れる値を変更する必要があります。
widthの値は”100%”、heightの値はフォームの高さにもよりますが、二重スクロールが発生しない値を入力することでPC画面での二重スクロールを防ぐことができます。
なので、今回はこのような形で埋め込みました。
<iframe src="ID" width="100%" height="2300" frameborder="0" marginheight="0" marginwidth="0">読み込んでいます…</iframe>
しかし、この状態ではスマホで見た際にheightの値が足りなくなってしまい、スマホ画面では二重スクロールが発生してしまいます。
なので、追加でWraptasでのCSS対応が必要となります。
WraptasでCSS編集
WraptasではCSSによる編集が行えるので、今回はスマホ用のメディアクエリを設定して二重スクロールを防ぎます。
今回記入したCSSは下記の通り
heightの値はPCよりも縦長になるため値を大きく設定しました。
こうすることで、画面下までの表示領域を広げ、二重スクロール問題を解決することができました。