0

I've noticed on web and mobile apps, when scrolling down to the bottom of a list with thousands of entries it reaches the bottom instantly but appears to be scrolling through every entry.

How is this visual effect achieved? What is the common way to implement this simulation of fast-scroll?

Improve this question
  • 3
    I have No Idea what you are talking about. And still this Sounds Like a question for stackoverflow – marstato Jan 17 '20 at 17:21
  • 2
    @marstato Sure? I can't imagine how this question could survive at Stack Overflow without more details. – πάντα ῥεῖ Jan 17 '20 at 17:55
  • 1
    @marstato The OP wonders how to achieve a visual effect of scrolling when in reality the app just goes to the end position. – Christophe Jan 18 '20 at 10:24
  • 1
    I think this feature is called "smooth scrolling" in html/css – Christophe Jan 18 '20 at 10:31
  • @πάνταῥεῖ maybe it's Just me who doesn't know that effect (by this name). But even if it's totally clear what visual result is desired this is a question about how to program it. Sounds like SO to me – marstato Jan 18 '20 at 19:38
3

In software, just as in movies, illusion of movement is created by presenting frames in quick succession. If you want to create the illusion of scrolling from item 1 to item 1000 in a second, you divide the number of items to scroll by the frame rate (e.g. 60fps) and move by a corresponding number of items (possibly fractional) for each frame. For example, if your first frame had item 1 at the top, next has item 17, and so on, you'll be at 1000 after approximately one second.

Improve this answer
0

With memory.

So long as you have more memory than your monitor requires you can render things that aren't on the screen yet. When you load a webpage the scroll bar thumb starts to shrink as the page grows off the screen. Just because it's off the screen doesn't mean it isn't rendered in memory. Then to scroll to any position all that has to change is the pointer to where in memory the top left of your window is. This will change what memory is scanned to display in the window. 1 or 1,000 or 1,000,000 if you have it rendered in memory already it's very little work to jump around. This is memory intensive not CPU intensive. It only gets CPU intensive if you don't have that much memory and have to swap things out as they scroll around.

If you have the memory, fast scroll isn't simulated at all. It's just that fast.

Improve this answer
  • That reminds of GC and what happens if you don't have far more memory than actually peak reachable. – Deduplicator Jan 18 '20 at 18:24
  • 1
    You don't actually have to render the whole page to fast scroll through a list of millions of items. Since your screen refresh rate is probably just around 60fps, you can just render 60 images at various points in the list for each second of animation. If there is an easing, most of the frames would even just be at the current and destination position of the list, so very few intermediate renders that are going to only be visible for a few seconds would've been needed. – Lie Ryan Jan 19 '20 at 5:48
  • Or you can just do a video slot machine effect, where the scroll animation is actually just a fake, generic infinite scrolling animation, and the wheel actually just slide on the correct images when the animation need to finish. – Lie Ryan Jan 19 '20 at 5:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.