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

【问题标题】：Add slide animation to horizontal scroll system将幻灯片动画添加到水平滚动系统
【发布时间】：2020-01-21 21:17:20
【问题描述】：

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

我想达到什么目标？
我滚动到一个容器子级：

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

我不能用这个选项来打开动画，因为浏览器 SAFARI 不支持这个。 See here

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

~提前感谢马库斯。

【问题讨论】：

就我个人而言，我不会为此使用 javascript。就像您当前的问题 url 片段将完成相同的事情并且在任何地方都可以使用，例如，如果您将第二个按钮更改为 a 锚并将其设置为 <a href="#pss_grades">PAGE 2</a> 并将您的 css 从 button 更改为 a 它会看起来一样，不用js也能实现同样的目标。

标签： javascript html css scrollview

【解决方案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' 
});

【讨论】：