Question

I need to smoothly scroll a large amount of text up the screen. Using webkitTransform does this very well, but I would also like to enable the user to change the speed of the scrolling or pause the scrolling based on how fast they’re reading. From what I’ve found, there isn’t a way to change the duration of a webkit transition once it has started. Using setInterval and moving the text works, but it gets jumpy and hard to read as the speed increases.

Can anyone recommend a good way to do this that would allow for the user to adjust speed and still give readable text at higher speeds?

Answer 1

I don’t know much about modifying currently running CSS3 transformations, but as an alternative solution, I would scroll a large amount of text with JavaScript by using the browser’s native scrolling with scrollTop (.scrollTop() if you are using jQuery).
This allows the user to have a familiar interface even without JavaScript, and can be simply implemented with setTimeout() or setInterval(). If the final result is too jumpy, try modifying scrollTop in smaller intervals, but faster. (i.e., instead of adding +100 every 500ms, try adding +10 every 50ms)