You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
c-scrollspy fonctionne avec [l'API de IntersectionObserver](https://developer.mozilla.org/fr/docs/Web/API/IntersectionObserver) et déclenche des callbacks selon les seuils de passages spécifiés dans la vue. Spécifier le nom du callback dans l'attribut `c-scrollspy="NAME_OF_THE_CALLBACK"`. c-scrollspy est livré avec un callback nommé `anchor` (le cas le plus courant). Il est possible de créer et d'utiliser vos propres callbacks.
57
+
58
+
**Chaque callback dispose de ses propres paramètres**
59
+
60
+
### Callback `anchor`
61
+
62
+
Avec le callback `anchor` (toujours inclus dans c-scrollspy.js), lorsque l'élément passe dans la fenêtre de visualisation, la classe des liens qui pointent vers cet élément est remplacée par "active".
63
+
64
+
**L'attribut id est obligatoire sur l'élément observé**
65
+
66
+
Il est possible de spécifier la classe de remplacement avec l'attribut `data-active-class="..."`
<p>Défiler vers le bas pour visualiser les bascules de classes au passage des sections dans la vue.</p>
89
+
<p>Par défaut, lorsque cette section passe dans la vue, la classe des liens qui pointent vers celle-ci sont remplacées par "active".</p>
90
+
</section>
91
+
92
+
<sectionid="section-financement"
93
+
c-scrollspy="anchors"
94
+
data-active-class="active-2 active-3">
95
+
<h2>Financement</h2>
96
+
<p>Section avec classes personnalisées. Lorsque cette section est dans la vue, la classe des liens qui pointent vers celle-ci sont remplacées par la valeur de l'attribut data-active-class. Ici "active-2 active-3"</p>
97
+
</section>
98
+
```
99
+
100
+
### Callback personnalisé
101
+
102
+
cScrollspyCallbacks object is available when c-scrollspy.js is set on the document. Write your own callbacks to fit your needs.
103
+
104
+
Exemple de callback vierge: [démo](https://ita-design-system.github.io/c-scrollspy.js/content/custom-callback.html)
105
+
106
+
```javascript
107
+
// Minimal
108
+
cScrollspyCallbacks.myCustomCallbackName= {
109
+
/**
110
+
* CALLBACK
111
+
* CALLBACK METHOD
112
+
* @arg{(object)}data event data returned by intersectonObserver
113
+
*/
114
+
callback:function(data) {
115
+
console.log('myCustomCallbackName', data);
116
+
// Your own stuff here
117
+
}
118
+
}
119
+
```
120
+
121
+
Exemple de callback simple avec options personnalisées: [démo](https://ita-design-system.github.io/c-scrollspy.js/content/custom-callback.html)
Indispensable pour démarrer l'application, instancie les IntersectionObserver, s'exécute automatiquement sur le `DOMReady` et peut être invoqué à tout moment, à chaque changement de DOM.
150
+
151
+
```javascript
152
+
cScrollspy.update();
153
+
```
154
+
155
+
## API
156
+
157
+
Toutes les instances de c-scrollspy sont placées dans `cScrollspy.instances[ID_DE_L_INSTANCE]`. `ID_DE_L_INSTANCE` est l'id de l'élément s'il est présent, s'il est absent, c-scrollspy applique un id préfixé de `cspy_` suivi de l'index de l'instance.
<p>Défiler vers le bas pour visualiser les bascules de classes au passage des sections dans la vue.</p>
32
+
<p>Par défaut, lorsque cette section passe dans la vue, la classe des liens qui pointent vers celle-ci sont remplacées par "active".</p>
33
+
<ahref="#section-reprise">Reprise</a>
34
+
</section>
35
+
36
+
<sectionid="section-reprise"
37
+
c-scrollspy="anchors">
38
+
<h2>Reprise</h2>
39
+
<ahref="#section-financement">Financement</a>
40
+
</section>
41
+
42
+
<sectionid="section-financement"
43
+
c-scrollspy="anchors"
44
+
data-active-class="active-2">
45
+
<h2>Financement</h2>
46
+
<p>Section avec classes personnalisées. Lorsque cette section est dans la vue, la classe des liens qui pointent vers celle-ci sont remplacées par la valeur de la chaine de caractères de l'attribut personnalisé data-active-class. Ici "active-2"</p>
47
+
<ahref="#section-livraison">Livraison</a>
48
+
</section>
49
+
50
+
<sectionid="section-livraison"
51
+
c-scrollspy="anchors"
52
+
data-active-class="active-3 test foobar">
53
+
<h2>Livraison</h2>
54
+
<p>Section avec classes personnalisées. Lorsque cette section est dans la vue, la classe des liens qui pointent vers celle-ci sont remplacées par la valeur de la chaine de caractères de l'attribut personnalisé data-active-class. "active-3 test foobar"</p>
0 commit comments