时间戳

首页 > 解决方案 > 将幻灯片动画添加到水平滚动系统

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

问题描述

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

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

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

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

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

〜提前感谢马库斯。

标签： javascripthtmlcssscrollview

解决方案

您可以为此使用 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' 
});

推荐阅读