![]() ![]() Personally, I don't love that Apple's MacOS hides the scrollbars by default. When using overflow: auto, on the other hand, the browser only renders the scrollbar when it is needed and, only on the axis (x or y) for which it is need.ĪSIDE: You can also use the CSS properties overflow-x and overflow-y, instead of overflow, to apply more selective control over when and how the scrollbars are rendered. Now, if we render this on a modern Apple device with default settings, both overflow container examples look exactly the same:Īs you can see, the containers that use overflow: scroll always render a scrollbar regardless of whether or not content is large enough to require scrolling. Use CSS Overflow "Auto" - Not Overflow "Scroll" - When Clipping Most Fixed-Size ContainersĬontent: "This is much longer content over here which will cause more scrolling than the short content, which should make the scrollbar behavior more apparent in the demo." Īs you can see, the two different sets of containers vary only in their use of the overflow property. 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 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |