Smooth scrolling performance on slow device

Question

I'm building a smart mirror using a raspberry pi 3 and an electron app. So my frontend is basically chrome with a single page app. The mirror has buttons underneath, some of which are for scrolling, so on tapping them, I want to smoothly scroll a content div by 200px. Currently I'm using jQuery:

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

Now that animation is not very fluid, it stutters because of the pi3's low performance. I'd like to know if there is any way to make this smooth. There is no native browser API so I was thinking about something with CSS and translate on a child element inside possibly. Are there any fluid methods to do this?

EDIT: I've tried the following CSS structure:

#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);
}

Now the problem would be to know how tall the content is and dynamically add the appropriate rules, so that there are enough sx classes and that the last one scrolls exactly to the bottom and no further so it leaves no ugly gap underneath the content. Is this possible with Javascript?

Answer 1

Scrolling performance could be affected by a very large number of factors, for example the use of position: fixed...etc so it is possible that the slow scroll (aka jank) you are seeing is caused by other factors too.

When animating something, as you correctly pointed out, always use CSS transform or opacity.

To implement your request I am setting the transform through JavaScript but animating through CSS. Of course you will need to add scroll limits, but I think it should be explanatory:

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