🖱 TLD - tld_smooth_scrollbar - Composant de Défilement Fluide

📖 Introduction

tld_smooth_scrollbar est un Web Component dédié à l’amélioration du défilement au sein des applications web. Il s’appuie sur la librairie Smooth Scrollbar.js afin d’offrir une expérience de scroll fluide avec inertie, particulièrement adaptée aux environnements desktop.

Le composant intègre également une détection automatique du type d’appareil, ce qui lui permet :

• d’activer le scroll fluide avec inertie sur PC,
• de conserver un comportement natif optimisé sur mobile et tablette,
• d’assurer une compatibilité totale multi-devices sans configuration supplémentaire

📦 Installation / Prérequis / Dépendances

tld_smooth_scrollbar repose sur les dépendances suivantes :

Dépendances internes

• tld_custom_elements Classe de base commune aux Web Components TLD.

Dépendances externe

• Smooth-Scrollbar.js Librairie de scroll inertiel performante et largement utilisée.

📄 Proprietes

Scrollbar

declare public Scrollbar : Scrollbar

Instance de Smooth Scrollbar créée lorsque le composant est utilisé sur un environnement PC. Elle permet d’accéder directement à l’API Smooth Scrollbar si nécessaire.

PostRoot

declare public _postRoot : Element

Élément racine interne dans lequel le contenu réel du composant est injecté. Il agit comme un proxy de conteneur, permettant d’abstraire la logique de scroll selon le type d’appareil.

InnerHTML

get innerHTML ()
set innerHTML (value)

Le composant redéfinit innerHTML afin de rediriger automatiquement le contenu vers _postRoot.

get innerHTML () {
    return this._postRoot.innerHTML
}

set innerHTML(value) {
    this._postRoot.innerHTML = value
}

Cela garantit une utilisation transparente du composant, quel que soit le mode de défilement actif.

⚙️ Methodes

Render

render() {}

La méthode render() initialise le comportement du composant en fonction du type d’appareil détecté

render() {

    if (this.detectDevice() == "PC") {
        this.Scrollbar = Scrollbar.init(this)
            
        this.appendChild = <T extends Node>(node : T) =>{
            this._postRoot.appendChild(node)
            return node
        }

        this._postRoot = this.querySelector(".scroll-content")!
    }else {
        this.setAttribute("phone" , "")
        const div = document.createElement("div")
        div.classList.add("tld-smooth-scrollbar-content")
        this._MouveAllElement(this,div)
        this.appendChild(div)
        
        this.appendChild = <T extends Node>(node : T) =>{
            this._postRoot.appendChild(node)
            return node
        }

        this._postRoot = div
    }
}

Fonctionnement :

Sur PC

• Initialisation de Smooth Scrollbar.
• Redirection de appendChild() vers le conteneur scroll interne.

Sur Mobile / Tablette

• Désactivation du scroll custom.
• Reconstitution du DOM avec un conteneur classique.
• Ajout de l’attribut phone pour le ciblage CSS.

DetectDevice

detectDevice() {}

Détecte le type de périphérique à partir du userAgent. Cette logique conditionne entièrement le mode de fonctionnement du composant.

detectDevice() {
        
        const userAgent = navigator.userAgent;
        let deviceType = "PC";
      
        if (/Mobi|Android|iPhone|iPad|iPod/i.test(userAgent)) {
            if (/Tablet|iPad/i.test(userAgent)) {
                deviceType = "Tablette";
            } else {
                deviceType = "Mobile";
            }
        }
        
        return deviceType;
    }

🚀 Utilisation

Exemple simple :

<tld-smooth-scrollbar>
    <p>Contenu avec un défilement fluide</p>
</tld-smooth-scrollbar>

Aucune configuration supplémentaire n’est requise : le composant adapte automatiquement son comportement.

L’attribut [phone] peut être exploité pour ajuster les styles selon le type d’appareil.

Stylisation (CSS)

Le composant ne repose pas sur le Shadow DOM, ce qui permet une personnalisation CSS complète depuis l’extérieur.

🎯 Conclusion

tld_smooth_scrollbar est un Web Component orienté UX, conçu pour améliorer significativement le défilement sur desktop tout en respectant les comportements natifs sur mobile et tablette.

Grâce à :

• une détection automatique des appareils,
• une abstraction du DOM interne,
• l’intégration de Smooth Scrollbar.js,

📜 Code

import Scrollbar from "smooth-scrollbar";
import { tld_custom_elements } from "../tld_custom_elements";

import "./index.css"

export class tld_smooth_scrollbar extends tld_custom_elements{

    declare public Scrollbar : Scrollbar
    declare public _postRoot : Element

    get innerHTML () {
        return this._postRoot.innerHTML
    }

    set innerHTML(value) {
        this._postRoot.innerHTML = value
    }

    constructor(Attributes : {[name:string] : any} | null = null) {
        super(Attributes);
    }

    render() {

        if (this.detectDevice() == "PC") {
            this.Scrollbar = Scrollbar.init(this)
                   
            this.appendChild = <T extends Node>(node : T) =>{
                this._postRoot.appendChild(node)
                return node
            }

            this._postRoot = this.querySelector(".scroll-content")!
        }else {
            this.setAttribute("phone" , "")
            const div = document.createElement("div")
            div.classList.add("tld-smooth-scrollbar-content")
            this._MouveAllElement(this,div)
            this.appendChild(div)
            
            this.appendChild = <T extends Node>(node : T) =>{
                this._postRoot.appendChild(node)
                return node
            }

            this._postRoot = div
        }
    }

    detectDevice() {
        
        const userAgent = navigator.userAgent;
        let deviceType = "PC";
      
        if (/Mobi|Android|iPhone|iPad|iPod/i.test(userAgent)) {
            if (/Tablet|iPad/i.test(userAgent)) {
                deviceType = "Tablette";
            } else {
                deviceType = "Mobile";
            }
        }
        
        return deviceType;
    }
    

}

tld-smooth-scrollbar[phone]{
    display: block;
}

.tld-smooth-scrollbar-content {
    min-width:fit-content;
    min-height: fit-content;
}