j-Scrollbar

jComponent 20 · jcomponent@20 component Exemple chargé avec jComponent 20

_ IMPORTANT:__ Il reçoit le contenu actuel en ajoutant deux éléments de div nés avec la position de relative. __Il fonctionne avec jComponent v17 seulement__.

Configuration :

Le sélecteur parent {String} pour un élément parent, peut contenir le window (defaut: undefined)
visibleX {Boolean} affiche toujours la barre d'échantillonnage horizontale (defaut: false)
visibleY {Boolean} affiche toujours la barre verticale (defaut: false)
offset {Boolean} ajoute offset.top de cet élément (defaut: false)
reset {Boolean} remet la position si le path est modifié (défaut: true)
margin {Numéro} une marge pour tous les types d'affichage (defaut: 0)
marginxs {Numéro} une marge pour les écrans XS (défaut: 0)
marginsm {Numéro} une marge pour les écrans SM (défaut: 0)
marginmd {Numéro} une marge pour les écrans MD (défaut: 0)
marginlg {Numéro} une marge pour les écrans LG (défaut: 0)
track {String} ne peut suivre que des voies définies, par exemple FIELD1,FIELD2,FIELD3, les voies seront liées à component.path

Méthodes :

component.reset() reprend la position à 0,0
component.scrollleft(val) pour les scrolls X
component.scrolltop(val) défile Y
component.scrollright(val) tourne X de la droite
component.scrollbottom(val) fait défiler Y depuis le côté inférieur
component.scroll(x, y) scrolls X, Y
component.resize() redimensionne le conteneur (il réagit automatiquement aux événements resize)

Utilisez-le avec <ui-component name="scrollbar">. Lorsque le composant n'est pas encore chargé, jComponent le télécharge lors de la première utilisation depuis l'adresse dans DEF.fallback (le CDN Componentator par défaut). Auteur : Peter Širka. Source : le référentiel de composants Componentator, licence MIT.

example.html

<ui-component name="scrollbar" style="background-color:rgba(100,100,100,0.05);height:200px;width:300px" class="hidden" data-jc-class="hidden">
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
	<div>1</div>
	<div>2</div>
	<div>3</div>
	<div>4</div>
	<div>5</div>
	<div>6</div>
	<div>7</div>
	<div>8</div>
	<div>9</div>
	<div>10</div>
</ui-component>