Skip to content

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

Merged
merged 3 commits into from
May 27, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/en/SUMMARY.md
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
- [Route Meta Fields (En)](advanced/meta.md)
- [Transitions (En)](advanced/transitions.md)
- [Data Fetching (En)](advanced/data-fetching.md)
- [Scroll Behavior (En)](advanced/scroll-behavior.md)
- [Comportement du défilement](advanced/scroll-behavior.md)
- [Lazy Loading (En)](advanced/lazy-loading.md)
- Réference de l'API
- [router-link (En)](api/router-link.md)
Expand Down
30 changes: 15 additions & 15 deletions docs/en/advanced/scroll-behavior.md
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 faire défiler la page jusqu'en haut lorsqu'on navigue vers 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, encore mieux, vous permet 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
// retourner la position désirée
}
})
```

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 }`
Copy link
Member

@MachinisteWeb MachinisteWeb May 27, 2017

Choose a reason for hiding this comment

The 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 »

  • new Object() ou {} // opérande object (typeof) d'instance Object (instanceof)
  • new String("Coucou") // opérande object (typeof) d'instance String (instanceof)
  • "Coucou" ou new String("Coucou").valueOf() ou new String("Coucou").toString()// opérande primitif de type string (typeof)

Aussi pour moi ils font bien référence à une primitive. Mais si tu as vu ça ailleurs, dit moi !

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Merci pour l'explication !
Pendant la traduction dans mes précédentes PR, j'ai remarqué qu'« Array » était utilisé en tant que "simple nom", et non pour définir le type d'une variable => https://github.com/vuejs-fr/vue-router/pull/7/files#diff-64b2b82de4b10a5b398aaee86543b445L69

Je vais repasser aux minuscules

Copy link
Member

@MachinisteWeb MachinisteWeb May 27, 2017

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok. il faisait donc référence à l'« instanceof » Array d'un « typeof » object. On conserve bien les minuscules.

- `{ 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.

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 au haut de page à chaque navigation à travers les routes.

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 :

``` js
scrollBehavior (to, from, savedPosition) {
Expand All @@ -46,7 +46,7 @@ scrollBehavior (to, from, savedPosition) {
}
```

If you want to simulate the "scroll to anchor" behavior:
Si vous voulez simuler le comportement « aller à l'ancre » :

``` js
scrollBehavior (to, from, savedPosition) {
Expand All @@ -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).