1. 🚀 Vue d’ensemble

Custom Scrollbar Premium remplace la barre de défilement native par une version 100 % personnalisable : couleurs, dimensions, animations, thèmes clair/sombre, responsive et API JavaScript pour un contrôle dynamique.

2. 🏗️ Architecture et composants

Type Bubble Nom Description
Action Apply Custom Scrollbar Applique un style personnalisé à un élément (via ID ou classe).
Action Scroll To Position Fait défiler un élément vers X/Y (smooth optionnel).
Action Toggle Scrollbar Affiche ou masque la barre.
Événement On Scroll Déclenché pendant le défilement ; expose position & %.
Événement On Scroll End Déclenché à l’arrêt du défilement.

Aucune action server-side ; tout est exécuté côté client.

3. ⚙️ Installation

  1. Dans Bubble : Plugins → rechercher « Custom Scrollbar Premium » → Install.

  2. Dans l’onglet Plugins, renseignez les paramètres par défaut si vous souhaitez que tous les scrollbars suivent le même style global.

    1. Dans Bubble : Plugins → rechercher « Custom Scrollbar Premium » → Install.
    1. Dans l’onglet Plugins, renseignez les paramètres par défaut si vous souhaitez que tous les scrollbars suivent le même style global.

4. 🔧 Paramètres du plugin (panneau Bubble)

Champ Type Par défaut Description
Width nombre 10 Largeur (px) scroll-vertical / hauteur (scroll horizontal).
Track color couleur #f1f1f1 Couleur d’arrière-plan de la piste.
Track shadow color couleur rgba(0,0,0,0.1) Ombre portée.
Shadow blur nombre 5 Rayon de flou de l’ombre (px).
Scrollbar color couleur #888 Couleur du « thumb ».
Color on hover / active couleur #555 /

#333 | États survol & clic. | | Handle border radius | nombre | 10 | Arrondi du thumb. |

Tous les champs acceptent n’importe quelle valeur CSS valide (black, #4FF, rgba(…), etc.).

5. 🎯 Guide d’utilisation

5.1 Application rapide (action Bubble)

When Page is loaded