{"id":4394,"date":"2018-02-16T08:55:48","date_gmt":"2018-02-16T07:55:48","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=4394"},"modified":"2024-08-21T15:10:39","modified_gmt":"2024-08-21T13:10:39","slug":"css-smooth-scrolling-behavior","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/css-css3\/css-smooth-scrolling-behavior","title":{"rendered":"Le saviez-vous \u2013 CSS Smooth-scrolling avec scroll-behavior"},"content":{"rendered":"\n

R\u00e9cemment dans un petit projet assez proche du prototype, j’ai eu \u00e0 proposer quelques petites choses comme un menu sticky<\/em><\/a>, un scroll-spy,<\/em> mix\u00e9 avec du smooth-scroll<\/em>. Plein d’effets qui demandent quand m\u00eame quelques lignes de JS. Et bien pas cette fois.<\/p>\n\n\n\n\n\n\n\n

La norme<\/h2>\n\n\n\n

Le CSS WG a introduit scroll-behavior<\/a> dans ses brouillons pour permettre de g\u00e9rer le comportement du d\u00e9filement des zones concern\u00e9es. Cette propri\u00e9t\u00e9 nouvelle vient avec tr\u00e8s peu de valeurs puisqu’elle propose auto<\/code> ou smooth<\/code>.<\/p>\n\n\n\n

\n

The scroll-behavior property specifies the scrolling behavior for a scrolling box, when scrolling happens due to navigation or CSSOM scrolling APIs. Any other scrolls, e.g. those that are performed by the user, are not affected by this property. When this property is specified on the root element, it applies to the viewport instead.<\/p>\n<\/blockquote>\n\n\n\n

Pour faire simple, cette propri\u00e9t\u00e9 s’applique \u00e0 toutes les actions qui permettent la navigation au sein d’une bo\u00eete avec d\u00e9filement. Sauf si l’utilisateur scroll<\/em> lui-m\u00eame dans la page manuellement.<\/p>\n\n\n\n

Le bout de code magique en CSS<\/h2>\n\n\n\n

Venons-en \u00e0 l’essentiel.
Pour mon petit projet, je n’avais pas besoin de me soucier du support, qui est plut\u00f4t bon sur Chrome et Firefox d\u00e9j\u00e0 en fait, du coup mon code CSS pour int\u00e9grer du smooth-scroll<\/em> dans ma page au lieu d’avoir des ancres qui me font sauter d’un point \u00e0 un autre c’\u00e9tait globalement \u00e7a :<\/p>\n\n\n

\n\t
html,body {    scroll-behavior: smooth;}<\/code><\/pre> 
 <\/div> <\/div><\/div>\n\n\n\n
Et voil\u00e0\u00e0\u00e0\u00e0 ! R\u00e9solu !<\/p>\n\n\n\n
Pour rappel \u00e0 une \u00e9poque lointaine, je publiais l’article Smooth-Scroll en jQuery<\/a>.
Je vous laisse comparer \ud83d\ude42<\/p>\n\n\n\n
Pour ceux qui veulent une d\u00e9mo avec le code \u00e9ditable, voici un petit CodePen.<\/p>\n\n\n
\n<\/p>\n\n\n\n\n
Support<\/h2>\n\n\n\n
Je vous laisse \u00e9galement avec le support de cette feature<\/em> CSS qui est plut\u00f4t bonne d\u00e9j\u00e0 pour de l’am\u00e9lioration progressive.<\/p>\n\n\n
Can I Use css-scroll-behavior?<\/a><\/div>\n\t\t