Googleサイトに埋め込みコードで検索欄を追加した際、スクロールがスムーズにいかず、上に弾かれて戻ってしまう問題はよく報告されています。これは、iframeで埋め込むコンテンツが親ページのスクロール挙動に干渉していることが原因です。
iframe埋め込みのスクロール問題の原因
Googleサイトでは埋め込みコードはiframeとして表示されることが多く、iframe内のスクロールイベントが親ページに干渉してしまうと、スクロールが思うように動かないことがあります。特に縦幅が固定されている場合や、タッチスクロール時に起こりやすいです。
解決策1：iframe高さを調整する
iframeの高さを十分に確保することで、スクロールが親ページと干渉せずスムーズになります。埋め込みコード内のheight属性やstyleでmin-heightを指定すると改善される場合があります。
解決策2：スクロールをiframe内に限定する
埋め込み側のコンテンツにoverflow:autoやoverflow-y:scrollを設定することで、iframe内で独立したスクロールを可能にできます。これにより、親ページはスクロールされず、上下の弾きも軽減されます。
解決策3：別ページリンクの検討
どうしても埋め込みでのスクロールが使いにくい場合、検索機能を別ページに設置し、リンクやボタンで飛ばす方法もあります。Googleサイトの制限内で最も安定する手法です。
まとめ
Googleサイトで埋め込み検索欄のスクロール問題は、iframe高さの調整やoverflow設定で改善可能です。場合によっては別ページへのリンク設置も検討し、ユーザー体験を向上させましょう。
コメント