Question

我正在使用树莓派3和电子应用程序构建智能镜像。所以我的前端基本上是单页应用程序的chrome。镜子下面有按钮，其中一些用于滚动，所以在点击它们时，我想平滑地滚动内容div 200px。目前我正在使用jQuery：

$('#content').animate({scrollTop: $('#content').scrollTop + 200})

现在动画不是很流畅，因为pi3的低性能导致它结结巴巴。我想知道是否有办法让这个顺利。没有本机浏览器API所以我在考虑使用CSS并在内部转换子元素。有没有流畅的方法来做到这一点？

编辑：我尝试了以下CSS结构：

#container {
  overflow-y: hidden;
  height: 200px;
}
#content {
  transition: transform 0.2s ease-out;
  transform: translate(0,0);
}
#content.s1 {
  transform: translate(0,-200px);
}
#content.s2 {
  transform: translate(0,-400px);
}

现在的问题是要知道内容的高度并动态添加适当的规则，以便有足够的sx类，并且最后一个类完全滚动到底部而不再进一步滚动内容下面的丑陋空白。这可以用Javascript吗？

Answer 1

滚动性能可能会受到很多因素的影响，例如使用position：fixed ...等等，所以你看到的慢滚动（也就是jank）可能也是由其他因素引起的。

正如你正确指出的那样动画制作动画时，总是使用CSS变换或不透明度。

要实现您的请求，我通过JavaScript设置转换，但通过CSS设置动画。当然你需要添加滚动限制，但我认为它应该是解释性的：

var obj = document.getElementById("innerContent");

document.getElementById("down").addEventListener("click", function() {
  var scrollY = obj.getAttribute("data-scrollY");
  scrollY = parseInt(scrollY) - 200;
  obj.setAttribute("data-scrollY", scrollY)
  obj.style.transform = "translateY(" + scrollY + "px)";
});

document.getElementById("up").addEventListener("click", function() {
  var scrollY = obj.getAttribute("data-scrollY");
  scrollY = parseInt(scrollY) + 200;
  obj.setAttribute("data-scrollY", scrollY)
  obj.style.transform = "translateY(" + scrollY + "px)";
});

http://codepen.io/kevinfarrugia/pen/egdPJX

在慢速设备上平滑滚动性能

1 个答案: