-
Notifications
You must be signed in to change notification settings - Fork 2
Traduction de advanced/scroll-behavior.md
#11
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Changes from 1 commit
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,40 +1,40 @@ | ||
# Scroll Behavior (En) <br><br> *Cette page est en cours de traduction française. Revenez une autre fois pour lire une traduction achevée ou [participez à la traduction française ici](https://github.com/vuejs-fr/vue-router).* | ||
# Comportement du défilement | ||
|
||
When using client-side routing, we may want to scroll to top when navigating to a new route, or preserve the scrolling position of history entries just like real page reload does. `vue-router` allows you to achieve these and even better, allows you to completely customize the scroll behavior on route navigation. | ||
En utilisant le routage côté client, nous pourrions vouloir défiler jusqu'au haut de la page lorsqu'on navigue à une nouvelle route, ou alors préserver la position du défilement des entrées de l'historique comme le ferait une page réelle. `vue-router` vous permet de faire cela et en mieux, ainsi que de changer le comportement du défilement pendant la navigation. | ||
|
||
**Note: this feature only works in HTML5 history mode.** | ||
**Note : cette fonctionnalité ne fonctionne qu'avec le mode historique HTML5.** | ||
|
||
When creating the router instance, you can provide the `scrollBehavior` function: | ||
Pendant la création de l'instance du routeur, vous pouvez renseigner la fonction `scrollBehavior` : | ||
|
||
``` js | ||
const router = new VueRouter({ | ||
routes: [...], | ||
scrollBehavior (to, from, savedPosition) { | ||
// return desired position | ||
// retourne la position désirée | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
ou
dépend de ce que tu as décidez dans le reste de la documentation |
||
} | ||
}) | ||
``` | ||
|
||
The `scrollBehavior` function receives the `to` and `from` route objects. The third argument, `savedPosition`, is only available if this is a `popstate` navigation (triggered by the browser's back/forward buttons). | ||
La fonction `scrollBehavior` reçoit les objets de route `to` et `from`. Le troisième argument, `savedPosition`, est disponible uniquement si c'est une navigation `popstate` (déclenchée par les boutons précédent/suivant du navigateur). | ||
|
||
The function can return a scroll position object. The object could be in the form of: | ||
La fonction peut retourner un objet décrivant la position du défilement. L'objet peut être de la forme : | ||
|
||
- `{ x: number, y: number }` | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Peux tu m'indiquer d'autres endroit dans les documentations ou la majuscule est utilisée ? Sinon remet les minuscules Car dans beaucoup de documentation, la lettre majuscule est utilisée car les relecteurs font soit référence au « Primitif Type Number » ou « Primitif Type String » ou alors parce qu'ils ne connaissent pas suffisamment le JavaScript et se réfèrent à leur habitude class object-oriended et non prototype object-oriented. Une manière conventionnelle d'écrire le typage des primitives est celui retournée par typeof sur une primitive « number », « string » « boolean » sans majuscule pour bien différencier de l'instance d'« object »
Aussi pour moi ils font bien référence à une primitive. Mais si tu as vu ça ailleurs, dit moi ! There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Merci pour l'explication ! Je vais repasser aux minuscules There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ok. il faisait donc référence à l'« instanceof » |
||
- `{ selector: string }` | ||
- `{ x: Number, y: Number }` | ||
- `{ selector: String }` | ||
|
||
If a falsy value or an empty object is returned, no scrolling will happen. | ||
Si une valeur équivalente à `false` ou un objet vide est retourné, aucun défilement ne sera produit. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Je laisse There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Tu as tout à fait raison :) C'était un There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Ahah 😛 |
||
|
||
For example: | ||
Par exemple : | ||
|
||
``` js | ||
scrollBehavior (to, from, savedPosition) { | ||
return { x: 0, y: 0 } | ||
} | ||
``` | ||
|
||
This will simply make the page scroll to top for all route navigations. | ||
Cela permettra de défiler jusqu'au haut de page à chaque navigation à travers les routes. | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
ou
|
||
|
||
Returning the `savedPosition` will result in a native-like behavior when navigating with back/forward buttons: | ||
Retourner l'objet `savedPosition` résultera en un comportement quasi-natif en naviguant avec les boutons précédents/suivants : | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. un espace en trop entre |
||
|
||
``` js | ||
scrollBehavior (to, from, savedPosition) { | ||
|
@@ -46,7 +46,7 @@ scrollBehavior (to, from, savedPosition) { | |
} | ||
``` | ||
|
||
If you want to simulate the "scroll to anchor" behavior: | ||
Si vous voulez simuler le comportement "défiler à l'ancre" : | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
|
||
``` js | ||
scrollBehavior (to, from, savedPosition) { | ||
|
@@ -58,4 +58,4 @@ scrollBehavior (to, from, savedPosition) { | |
} | ||
``` | ||
|
||
We can also use [route meta fields](meta.md) to implement fine-grained scroll behavior control. Check out a full example [here](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js). | ||
On peut aussi utiliser les [champs meta de route](meta.md) pour implémenter un contrôle bien précis pour le comportement du défilement. Allez voir un exemple complet [ici](https://github.com/vuejs/vue-router/blob/dev/examples/scroll-behavior/app.js). |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
ou
met le mieux est encore
Naviguer vers semble plus naturel (Aller à / Naviguer vers)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Il me semble que le « even better » se réfère à la suite. Je pencherai pour
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
J'ai un peu buté à propos du haut de la page, j'avais pensé qu'on disait souvent « le pied de page », et cela pouvait donc s'appliquer pour le « haut de page ».