by Evan Czaplicki
Have you ever thought about how “scrolling” is a metaphor about scrolls? Like hanging scrolls of caligraphy made during the Han Dynasty in China?
This metaphor falls apart almost immediately though. For example, many scrolls read horizontally! Like a Sefer Torah or Chinese Handscrolls. The two sides move independently, sometimes kept in place with stones. What is a scroll bar in this world? And hanging scrolls (which are displayed vertically) do not “scroll” at all! They hang!
So in JavaScript, we start with a badly stretched metaphor and add a bunch of
DOM details like padding, borders, and margins. How do those relate to scrolls?
For example, JavaScript has clientWidth. Client like a feudal state that pays
tribute to the emperor? And offsetHeight. Can an offset even have height? And
what has that got to do with scrolls?
So instead of inheriting this metaphorical hodge-podge, we use terminology from 3D graphics. You have a scene containing all your elements and a viewport into the scene. I think it ends up being a lot clearer, but you can evaluate for yourself when you see the diagrams later!
Note: For more scroll facts, I recommend A Day on the Grand Canal with the Emperor of China or: Surface Is Illusion But So Is Depth where David Hockney explores the history of perspective in art. Really interesting!