21

I came across a link to a site that shows the history of the scroll bar. While the content of the site is pretty thin and devoid of explanation, it does show Xerox Star, Lisa, Mac, Amiga, Windows, NeXT over a few years.

I've never used a Xerox machine, but based on the aforementioned web page, it looks like that if it wasn't the Xerox Star then it was the AmigaOS that first had a proportionally-sized slider in the scroll bar.

What I mean by a proportionally-sized "slider" in the scroll bar is that if the document is small, then the slider is large and barely has room to move in its boundaries. If the document is large, it proportionally shrinks down. A non-proportionally-sized slider is always the same size regardless of the height of the document. An example of the non-proportional slider is classic MacOS or Windows 1.0 through 3.1 where the slider was a nugget and would jump significantly for a smaller document being scrolled because its boundaries were massive in comparison to its size and it had to make up for the representation of whether you were at the beginning or end of a document.

Today it seems that all scroll bar sliders are proportionally-sized. So the question comes down to what was the first GUI / windowing / operating system that supported the proportionally-sized slider?

18
  • 13
    FWIW, DR's GEM had proportional scrollbars and was released a few months before the Amiga. Commented Nov 3, 2021 at 20:19
  • 2
    That site fails to mention much outside the "personal computer" area. My first guess for proportional scrollbars would have been Motif in the late 1980s.
    – dave
    Commented Nov 3, 2021 at 21:30
  • 2
    @tofro, I've used at least one windowing framework in which the easy way to get a scrollable view was for the application to create a "canvas" that was tall enough to hold the entire content, stick it in a "scroller," and let the windowing system have full control of scrolling/paging. The application's only responsibility would be to (re)draw whatever sub-rectangle of the canvas when the window system sent it a "paint" request. Commented Nov 4, 2021 at 0:08
  • 2
    @tofro: There's no reason why telling the window system the size of the canvas would mean the application has to hold the entire document in memory. Some systems do function in exactly the way Solomon Slow describes - for example, in RISC OS you provide the coordinates of the "work area", and the window system sets the scroll bars automatically (and sends you events telling you what you need to draw and where).
    – psmears
    Commented Nov 4, 2021 at 10:46
  • 2
    The Neptune browser on the Xerox Alto had an invisible scroll bar. Since it was invisible, you could claim that it was proportional, and no one could prove the opposite... -- Thanks, I'll see myself out.
    – Klaws
    Commented Nov 5, 2021 at 10:15

3 Answers 3

28

Can't say I know for sure. But I'll ante up Smalltalk 80 (or even earlier, ST-72, 76, 78).

enter image description here enter image description here

2
  • 2
    The Wikipedia article currently claims “In 1977, Smalltalk … the first proportional scroll bar”. However, it cites the ST-76 manual which does not justify the assertion that it's the first, and in fact I think contradicts the claim that it is proportional: it describes the position indicator as a “small box”, not as a variable-sized box. Commented Nov 4, 2021 at 10:00
  • 1
    This ST-78 emulator has a small box, too. So the variable-sized box was probably introduced in ST-80. Commented Nov 4, 2021 at 10:00
25

The MIT CADR Lisp Machine, developed in the late 1970's, had proportional scroll bars.

I haven't been able to find a screenshot of an actual Lisp Machine that shows this -- I can only find images and youTube videos of emulators running on Macs and Linux; these run Open Genera, a later port of the Symbolics Genera OS, which was evolved extensively beyond the original design. But I did find this description in early documentation, from page 25:

The other scrolling feature is the scroll bar. The left edge of the Editor window resists violation in the same way as the scrolling zones do, but in this case the mouse cursor changes to a double-headed arrow pointing up and down. In addition, a thin line appears somewhere along the left edge, just inside the border and parallel to it. The length of this line and its position with respect to the entire left edge are in proportion to the length and position of the Editor window with respect to the entire Editor buffer.

There's no date on the document, but I arrived at MIT in fall of 1979, and these Lisp Machines were already in use at the time.

Another feature of the Lisp Machine UI that only reappeared recently was that moving the mouse back and forth rapidly would cause the mouse pointer to magnify. Apple added this in El Capitan. I don't have the documentation of this feature handy, but IIRC it warned that this would scare young children.

3
  • 3
    I can confirm this. I had the opportunity to play a little with one of these back in 1987. The small "History of Computing" display/museum at the data-center of my university had one of these lying around. I volunteered as a guide in the museum when the Queen (Beatrix of the Netherlands) made a visit in 1987 and I got a crash-course to operate it in order to demonstrate. The machine was presented as "one of the first machines with a graphical user-interface". It was sitting right next to an Amiga 500, running a gfx/music demo, that was far more appealing.
    – Tonny
    Commented Nov 4, 2021 at 15:30
  • 3
    +1, excellent find and well-documented. For anyone else wondering at the bizarre word choice in this quotation, “resists violation” here means “won’t let the mouse leave the window across that edge,” as the preceding paragraphs discuss in greater detail.
    – KRyan
    Commented Nov 4, 2021 at 22:11
  • @KRyan - thanks for that clarification because it was not obvious what that meant!
    – davidbak
    Commented Nov 4, 2021 at 22:28
20

Smalltalk-80 is the earliest that I'm aware of.

The following emulator1, 2 screenshot shows how it displayed them: Smalltalk-80 screenshot

This emulator3 screenshot shows how the earlier Smalltalk-78 displayed them differently: Smalltalk-78 screenshot

1 If you get build errors run ln -s . Smalltalk before running make.

2 Alternatively, you can use this browser-based emulator.

3 Alternate link to the Smalltalk Zoo where there are a number of other emulators available.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .