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