Добавить анимацию слайдов в систему горизонтальной прокрутки

Question

Я кодировал простую систему горизонтальной прокрутки. В JSFIDDLE вы можете найти пример моей работы: http://jsfiddle.net/marcus_derem/qn603h8b/133/

Чего я хочу достичь?
Я прокручиваю до дочернего контейнера с этим :

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

Я не могу использовать это с опциями для включения анимации, потому что браузер SAFARI не поддерживает это. Смотрите здесь

Мой вопрос:
Как добавить анимацию слайдов в систему на JSFIDDLE? Или мне переписать механику?

~ Заранее спасибо, Маркус.

Answer 1

Вы можете использовать css для этого:

html {
  scroll-behavior: smooth;
}

Но, опять же, поддержка браузером не так уж и велика .

Есть и другие методы хотя. Просто прочитайте эту страницу для большого обзора: 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' 
});