For each set, one example has content that fits entirely within the container dimensions and, the other example has content that requires handling of the overflow container. To see this in action, I've created a simple demo in which we have two sets of containers: one with overflow: scroll and one with overflow: auto. With overflow: auto, the browser only renders the scrollbars if the container actually has to scroll that is, only if the content does not fit entirely within the container dimensions. With overflow: scroll, the browser renders the container scrollbars always, even if the content fits entirely within the container dimensions. The difference between the two CSS values dictates when the browser renders the actual scrollbar. When we use either overflow: auto or overflow: scroll, we're telling the browser to scroll the container when the content doesn't fit entirely within the container dimensions.
In a fixed-size container, we can use the CSS overflow property to define how the browser will render content inside of said container.
View this code in my JavaScript Demos project on GitHub.
Run this demo in my JavaScript Demos project on GitHub. As such, I just wanted to quickly outline the difference in CSS overflow behaviors. Unfortunately, on Apple products, spotting this mistake is difficult. More and more, I see web developers accidentally using overflow: scroll when what they intended to use was overflow: auto. This change in the Apple ecosystem has made it difficult for younger web developers to build a strong instinct for the CSS overflow property. Then, later on, MacOS followed-suit, turning off scrollbar visibility by default. Thin little scrollbars showed up when you started to scroll but, for the most part, the Apple iPhone user interface (UI) was scrollbar-free. Well, at least, not scrollbars that were visible all the time. When the Apple iPhone came out in 2007, the default Safari Mobile browser didn't have scrollbars.
0 kommentar(er)
