Relative scrollbar

1

Hi there, would like some feedback on a UI element.

I’m trying to design a new kind of scrollbar for content that changes height.
Problem to solve:

  • No indicator for highlighted content position on scrollbar
  • Scrollbar jumping around when content gets backfilled (i.e chat view)
  • Scrollbar jumping around when content gets frontfilled (i.e load more)

Quaternion has a kind of control I want to use as inspiration, but i would like to go a bit further. This is my rough design sketch:

idea
idea1000×1000 112 KB

2

Traditionally this is done with pagination (next/previous buttons) rather than scrollbars, since it isn’t really scrolling. Not saying that we should do exactly that, but it could provide more ideas on how to achieve it without “misusing” a scrollbar.

For instant messaging use case, at least for xmpp, you can know the number of messages in the archive, and have the scrollbar sized according to that. Then you could have the scroll area tinted various colors to indicate which areas are available locally, or only on the server

3

I think I know exactly the type of scrollbar you are looking for.

The knob is bound to the center, you can move it upwards and downwards and it rebounds to the center when let go. The scroll direction and speed are determined by how far you move the knob in a given direction.

Would be pretty straightforward to implement, really, could even be a drop-in replacement for BScrollBar.

Pagination would be really useful for creating automatic scroll preview and zone coloring, otherwise I would create an API for the app, maybe a scroll anchor that would get added to the view and have the properties the scrollbars would use to display the coloring and preview.

4

Let’s split the top half of the scrollbar in two parts:

                   v
<------------------------|

The last N% of the scroll denote scrolling range of a page. The first (100 - N)% percent of the scrollbar is split in the following way: the last N% percent of the part denote scrolling range of a page, and the first (100 - N)% is split in the following way…

This recursive trick allows for absolute scrolling from a given position. And there’s no problem with jumping since scroll range is infinite: you can just limit the scrollable part of the scrollbar.

When the page fraction of the scrollbar becomes too small you might want to switch to speed based scrolling.