![](http://atombase.co.jp/wp-content/uploads/2023/10/accent.jpg)
Bubbleのアプリケーションでスクロールバーを非表示にするには、簡単なCSSの変更と設定の更新が必要です。これにより、ページやエレメントのスクロールバーを目立たないようにすることができます。
ページのHTMLヘッダーの編集: まず、ページのエレメント設定を開き、Page HTML headerに以下のCSSコードを貼り付けます。このコードは、スクロールバーを隠すためのものです。
<style>
#hideScroll::-webkit-scrollbar { display: none; }
#hideScroll{
-ms-overflow-style: none;
scrollbar-width: none;
}
</style>
![](https://atombase.co.jp/wp-content/uploads/2024/01/2e573bc5d6a26bfd21a50b60c092bb18-1024x540.png)
ID属性の設定を有効にする: 次に、Bubbleの設定(Settings > General)に移動し、「Expose the option to add an ID attribute to HTML elements」のチェックボックスをオンにします。これにより、エレメントにID属性を追加するオプションが利用可能になります。
![](https://atombase.co.jp/wp-content/uploads/2024/01/scrollchecl-1024x535.png)
エレメントにIDを割り当てる: 最後に、スクロールバーを隠したいエレメントの外観設定(Appearance)の下部にあるID属性フィールドに、「hideScroll」というIDを割り当てます。これにより、ステップ1で定義したCSSスタイルが適用され、スクロールバーが非表示になります。
![](https://atombase.co.jp/wp-content/uploads/2024/01/Hidescroll.png)
これによりScrollはできる状態は保ったまま、Scrollbarを非表示にできます。