2分でScrollBarを非表示にする方法【Bubble】

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を非表示にできます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です