将幻灯片动画添加到水平滚动系统

Question

我编写了一个简单的水平滚动系统。在JSFIDDLE，您可以找到我的工作示例：http://jsfiddle.net/marcus_derem/qn603h8b/133/

我想实现什么？
我滚动到一个容器子级：

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

我不能将其与用于打开动画的选项一起使用，因为浏览器SAFARI不支持此功能。 See here

我的问题：
如何在JSFIDDLE上向系统添加幻灯片动画？还是我要重写机制？

〜先谢谢马库斯。

Answer 1

您可以为此使用css：

html {
  scroll-behavior: smooth;
}

但是再说一次，browser support for that isn't that great either。

不过还有其他方法。只需阅读此页面即可获得出色的概述：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' 
});