【Bubble】画面幅に応じて横スクロールバーを自動表示・非表示する方法

こんにちは！

EPICs株式会社です。

今回は、Bubbleで、デバイスの画面幅に応じて横スクロールバーを自動的に表示・非表示にする方法をご紹介します。

これを実装することで、ユーザーの画面サイズに合わせたデザインを提供することができます！

実装イメージ

・スクロールバーが表示されている状態

・スクロールバーを非表示にした状態

以下の手順で実装します。

実装手順

1. ID属性の設定を有効にする

まず、BubbleエディターでID属性を使用可能にします。

設定(Settings)タブのGeneralセクションにある「Expose the option to add an ID attribute to HTML elements」にチェックを入れてください。

2. 対象要素にIDを割り当てる

次に、横スクロールバーの表示・非表示を制御したい要素（例えば、Repeating Groupなど）を選択し、その要素の「ID Attribute」フィールドに任意のID名（例：scrollable-group）を入力します。

3. カスタムCSSの追加

ページ内にHTMLエレメントを配置し、以下のCSSコードを追加します。

このコードは、画面幅に応じて横スクロールバーの表示を制御します。

・追加するhtmlコード

<style>
#scrollable-group {
overflow-x: auto;
white-space: nowrap;
}
</style>

上記のCSSでは、overflow-x: auto;を設定することで、コンテンツが要素の幅を超えた場合にのみ横スクロールバーが表示されます。

※overflow-x:scroll ;にするとスクロールバーが残った状態になります。

また、white-space: nowrap;を追加することで、内部のコンテンツが折り返されずに横方向に並ぶようになります。

最後に、プレビューモードで画面幅を変化させながら、横スクロールバーの表示・非表示が期待通りに動作するか確認しましょう。
必要に応じて、CSSやレイアウト設定を微調整してください。

この手法により、デバイスの画面幅に応じて横スクロールバーを自動的に表示・非表示にすることが可能です。

ユーザーが快適にページを見られるように、ぜひ活用してみてください。