Add slide animation to horizontal scroll system

Question

I coded a simple horizontal scroll system. At JSFIDDLE you can find an example of my work : http://jsfiddle.net/marcus_derem/qn603h8b/133/

What do I want to achieve?
I scroll to a containers child with this:

document.getElementById(target_subpage_id).scrollIntoView(false);  

I can not use this with options to turn on animations, because the Browser SAFARI doesn't support this. See here

My Question:
How to add a slide animation to the system on JSFIDDLE? Or have I to rewrite the mechanics?

~Thanks in advance Markus.

Answer 1

You could use css for that:

html {
  scroll-behavior: smooth;
}

But then again, browser support for that isn't that great either.

There's other methods though. Just read this page for a great overview: https://css-tricks.com/snippets/jquery/smooth-scrolling/

// Scroll to specific values
// scrollTo is the same
window.scroll({
  top: 2500, 
  left: 0, 
  behavior: 'smooth'
});

// Scroll certain amounts from current position 
window.scrollBy({ 
  top: 100, // could be negative value
  left: 0, 
  behavior: 'smooth' 
});

// Scroll to a certain element
document.querySelector('.hello').scrollIntoView({ 
  behavior: 'smooth' 
});