{"id":6480,"date":"2018-02-16T14:20:22","date_gmt":"2018-02-16T13:20:22","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog?p=6480"},"modified":"2019-09-08T14:50:47","modified_gmt":"2019-09-08T12:50:47","slug":"css-smooth-scrolling-with-scroll-behavior","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/en\/css3\/css-smooth-scrolling-with-scroll-behavior","title":{"rendered":"Did You Know \u2013 CSS Smooth-scrolling with scroll-behavior"},"content":{"rendered":"

Recently in a small project, I had to build something quickly, like a prototype, which contains some little things like a sticky menu,<\/em> a scroll-spy<\/em>, mixed with a smooth-scrolling behavior. Some features that often ask to spend time on JavaScript coding. Well, not this time.<\/p>\n

<\/p>\n

The CSS Working Group says\u2026<\/h2>\n

The CSS WG introduced scroll-behavior<\/a> in its drafts to allow you to handle the behavior of the scroll inside the scrolling box. Yes, obvious I know. This new feature comes with a few values, only 2 actually:\u00a0 auto<\/code> and smooth<\/code>.<\/p>\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><\/blockquote>\n

In other words this property applies on all actions which makes the navigation possible inside a scrolling box, unless the user scrolls by theirselves inside the page, manually.<\/p>\n

The magic piece of code<\/h2>\n

Get to the point.
\nFor my little project, I didn’t care about the support, which is pretty good on Chrome and Firefox already,\u00a0 so my CSS code used to add smooth-scrolling inside my page is really simple and short:<\/p>\n

body {\r\n    scroll-behavior: smooth;\r\n}<\/code><\/pre>\n
And voilaaaa! Solved!<\/p>\n
For those who need a demo with editable code, here is a CodePen.<\/p>\n
\n<\/p>\n\n
Support<\/h2>\n
I leave you here with the support of this CSS feature which is really good for progressive enhancement (IMHO).<\/p>\n
Can I Use css-scroll-behavior?<\/a><\/div>\n\t\t