Dans toute application, la barre de défilement est un élément très important pour l'utilisateur.

Elle indique que le contenu visible dépasse la hauteur de l'écran et qu'il est donc possible de faire défiler la page.

Cependant, les barres de défilement par défaut ne sont pas toujours esthétiques ni adaptées.

Par exemple, nos utilisateurs sous Windows rencontraient un problème à cause d'une barre de défilement trop large par défaut.

Nous avons donc dû la modifier (finalement, nous l'avons complètement supprimée).

Dans cet article, je vais vous montrer comment personnaliser les barres de défilement de vos applications en 2 minutes, sans aucun plugin !

Étape 1 : Concevoir votre barre de défilement

Tout d'abord, nous allons créer notre barre de défilement personnalisée.

Pour vous donner un peu de contexte, nous allons utiliser du CSS pour styler notre barre de défilement, mais ne vous inquiétez pas, nous avons trouvé une solution visuelle pour le faire sans avoir besoin de connaissances en CSS.

Rendez-vous sur ce site : Custom Scrollbar Maker

C'est un pen créé par un membre de la communauté Codepen qui offre une interface visuelle pour personnaliser les barres de défilement.

Vous pouvez modifier facilement toutes les propriétés et voir le résultat en temps réel. C’est un gain de temps considérable !

‍

Étape 2 : Importer notre code dans Bubble

Une fois que vous avez conçu votre barre de défilement, copiez le code qui apparaît à droite de l’éditeur de barre de défilement.

C’est ce code que nous allons intégrer dans notre application Bubble.

Vous avez plusieurs façons de l’importer dans votre application, le choix dépendra de votre cas d’usage.

IMPORTANT : Pour que le code fonctionne, il doit être inclus dans des balises <style>

Exemple :

</style>

<style>
    /* ===== Scrollbar CSS ===== */  /* Firefox */  * 
    { 
        scrollbar-width: auto; 
        scrollbar-color: #4157fb #ffffff; 
    } 
    /* Chrome, Edge, and Safari */ 
    *::-webkit-scrollbar {  
        width: 16px; 
        } 
        *::-webkit-scrollbar-track { 
            background: #ffffff; 
            } 
            *::-webkit-scrollbar-thumb {  
                background-color: #4157fb;  
                border-radius: 10px;  
                border: 3px solid #ffffff; 
                }
</style>

1. Vous souhaitez modifier la barre de défilement sur toute votre application

Si vous voulez que votre nouvelle barre de défilement s'applique à toute votre application Bubble, vous pouvez utiliser cette méthode.

Rendez-vous dans les Paramètres de votre application --> SEO/Metatags --> Script/Meta tags dans le header

Collez simplement le code de votre barre de défilement dans cette section (en incluant bien les balises <style>).

Cliquez sur Preview, et vous devriez maintenant voir votre toute nouvelle barre de défilement dans toute votre application !

2. Vous souhaitez modifier la barre de défilement sur certaines pages uniquement

Pour diverses raisons, vous ne voulez peut-être pas que la barre de défilement soit modifiée sur chaque page de votre application.

La meilleure solution pour modifier uniquement certaines pages est d'intégrer le code précédent directement dans le header de chaque page concernée.

Pour cela, rendez-vous dans le panneau de propriétés de la page où vous souhaitez l'ajouter et collez votre code (avec les balises <style> également) :

Et voilà, cliquez sur "preview" et vous devriez voir les changements !

Répétez cette opération pour toutes les pages où vous souhaitez appliquer votre nouvelle barre de défilement, et c’est parti !