# Bubble上での横スクロールについて **URL:** \ **Category:** bubble\ **Created:** [2022 年 8 月 16 日午前 10:32 UTC](https://www.nocode-faq.com/t/topic/3091 "2022-08-16T10:32:13Z")\ **Posts on this page:** 4\ **Page:** 1
**Author:** ![ryosuke04270](https://avatars.discourse-cdn.com/v4/letter/r/df788c/32.png) [@ryosuke04270](https://www.nocode-faq.com/u/ryosuke04270)\ **Post date:** [2022 年 8 月 16 日午前 10:32 UTC](https://www.nocode-faq.com/t/topic/3091/1 "2022-08-16T10:32:13Z")
いつもお世話になっております。 現在、bubbleでiPhoneアプリを作成しています。（BDKを用いてネイティブ化します） そのアプリ内でスマートニュースのような、横スクロールメニュー（赤く囲っているところ）でカテゴリーを選択し、該当カテゴリーの記事が一覧表示されるものを実装しようと考えています。 横スクロールメニューについて、Repeating Groupを用いて再現することはできますが、下部の記事の表示と連携させることができませんでした。 質問なのですが、RepeatingGroup以外で、Elementsなどを設置し、横スクロールできる機能（プラグインを含む）はありますか？ 前提条件 横スクロールメニューの下部に設置する記事の一覧表示は、FloatingGroup内にRepeating Groupを設置したものをカテゴリーの数だけ、複製して配置します。（iphoneアプリにした際にページ切り替えになるとロードの時間が長くなるため） そして、記事をタップすると（workflow\>navigation\>go to pageのsend more parameters to the pageを用いて）各記事の詳細情報が別ページで表示される仕様を考えています。 また、floatingGroupの表示は、各floatingGroupのconditionから設定しようと思います。 よろしくお願いいたします。 ![d7945-429-40efc9bfca1151ce69b3-0 (1)](https://us1.discourse-cdn.com/flex020/uploads/ncc_forum/original/2X/f/faa1d5270262d40e95ac3dc9a0e241bad8e75040.png) ---
**Author:** ![Aki\_Sydney](https://sea2.discourse-cdn.com/flex020/user_avatar/www.nocode-faq.com/aki_sydney/32/6600_2.png) [@Aki\_Sydney](https://www.nocode-faq.com/u/Aki_Sydney)\ **Post date:** [2022 年 8 月 18 日午前 3:48 UTC](https://www.nocode-faq.com/t/topic/3091/2 "2022-08-18T03:48:58Z")
LayoutがRowのグループの中に、スクロールさせたいタブを置いていきます。 そして、そのグループにClassまたはIDを付与し、以下のCSSを適用させます。 **flex-wrap: nowrap !important;** **overflow-x: scroll !important;** flex-wrapをnowrapにすることで、ブラウザ幅が縮んでも改行されなくなります。 そしてそのはみ出した部分を、overflow-xのscrollで、横スクロールにさせています。 実際に作ってみたのでご参照ください。 ↓動きはこんな感じ > **[Gyazo](https://gyazo.com/ba73d84e9c42800dc94452d9d8769439)** > > Easily capture screenshots, GIFs, and replays that are ready to share. Download the free app for windows and mac. ↓エディタ > **[Bubble Editor - Faq-test-scroll](https://bubble.io/page?name=index&id=faq-test-scroll&tab=tabs-1)** > > Build stuff without code and launch a startup without a tech-cofounder! Bubble is a visual programing language. Instead of typing code, use a visual editor to build applications. ---
**Author:** ![ryosuke04270](https://avatars.discourse-cdn.com/v4/letter/r/df788c/32.png) [@ryosuke04270](https://www.nocode-faq.com/u/ryosuke04270)\ **Post date:** [2022 年 8 月 19 日午前 1:59 UTC](https://www.nocode-faq.com/t/topic/3091/3 "2022-08-19T01:59:08Z")
Aki\_Sydney様 ありがとうございます。そちらで試してみます。 ---
**Author:** ![ryosuke04270](https://avatars.discourse-cdn.com/v4/letter/r/df788c/32.png) [@ryosuke04270](https://www.nocode-faq.com/u/ryosuke04270)\ **Post date:** [2022 年 8 月 19 日午前 7:15 UTC](https://www.nocode-faq.com/t/topic/3091/4 "2022-08-19T07:15:39Z")
Aki\_Sydney様 いただいたエディタの通り、elementのグループに{addClass:“nav\_menu”}を付与する形に行いましたが、実装できませんでした。 しかし、workflowのAdd Class by ID CSSTools を用いて、Classを付与した後、Add Custom Style To Head CSSTools を用いて上記のCSSを適用すると実装できました。 ご回答いただき、ありがとうございました。