CSSOM View Smooth Scroll API
Adds an optional argument to existing scroll APIs that specifies whether scrolling should be smooth. Also adds a CSS property for this.
![Jonathan Sampson [MSFT]](/googleai/decoding-https-web.archive.org/web/20171022184344im_/https://secure.gravatar.com/avatar/d7d887f36f0d23091cac37c6e7cb1ae4?size=40&default=https%3A%2F%2Fassets0.uvcdn.com%2Fpkg%2Fadmin%2Ficons%2Fuser_70-62136f6de7efc58cc79dabcfed799c01.png){kind=small}
Jonathan Sampson [MSFT]
shared this idea
4 comments
-
Mattia Astorino
commented
Chrome 61 will support this and the css scroll-behavior. Firefox already support that.
-
Arturo Coronel
commented
excellent!!!
-
Jonathan
commented
Just used in a project with jQuery fallback... Would be great to see it in more browsers! Maybe this snippet is helpful:
var nav_top = jQuery("#site-navigation").offset().top; // Element that you want to scroll to...
// Try to use native smooth scrolling
// Thanks: https://blog.hospodarets.com/native_smooth_scrolling
if('scrollBehavior' in document.documentElement.style){
window.scrollTo(
{"top": nav_top, "behavior": "smooth"}
)
} else {
jQuery('html, body').animate({
scrollTop: nav_top
}, 1000);
} -
Taylor Hunt
commented
This is especially nice from a user standpoint, because it obviates scroll-jacking that never works quite right.
From what I understand, current scroll methods recalculate style and relayout, so this would be a more performant way to achieve smooth scroll-tos.
