![]() Or you could use some JavaScript to detect scroll position and add a scroll shadow.īoth of these issues can be avoided by specifying custom scrollbar styling, so we should be good here. To work around this, you could maybe force the height of the scrollport to be such that the last item is half visible. In other words, disappearing scrollbars can literally cost you money. Recently I had an experience where I literally couldn't find the ticket to a conference because it was hidden outside the scrollport and the scrollbar was invisible. In practice, they are very frustrating to deal with. if the user knows that a part of the page is scrollable. They can offer a nice and clean interface. The second is a more relatable problem: automatically disappearing scrollbars. This effectively makes the already-thin scrollbar even thinner (albeit only for the viewport scroller). This is because macOS reserves the edges for resizing/moving the window, even if the cursor is still hovering on the scrollbar thumb. The first one is a bit of nitpick but I find it super frustrating that I can't just move my cursor to the right edge of a browser window and use it to scroll. While macOS scrollbars look less offensive, they come with their fair share of problems. This is exactly what we want, at least until the Windows 11 scrollbars ship in Chromium. ![]() ![]() On Chromium, things are simpler: if you specify even one of those -webkit-scrollbar prefixed properties, you become responsible for providing the entire scrollbar styling. I really hope this will be addressed in a future update. Firefox does respect the "Always show scrollbars" setting in Windows 11 but it's off by default and we can't reasonably expect most users to turn it on. To make things worse, there seems to be no way to change this behavior programmatically. The Firefox implementation in particular worries me because the scrollbar is razor thin and disappears unless you're actively interacting with it. As for the browsers, Firefox 100+ is already shipping it, while Edge/Chrome have it in some form behind a flag. This can be noticed in the various first-party interfaces (e.g. Windows 11 is attempting to modernize the scrollbars by making them thinner and overlay. Even if you set the right color scheme, they look too boxy and thick. Windows 10 specifically has the ugliest scrollbars in all browsers. □ WindowsĪs I demonstrated in the previous section, Windows has always had some of the ugliest-looking scrollbars of any platform. If all you care about is the code, feel free to scroll to the end of this section. In this section, I will rant about different environments, the expectations, the behaviors, and the problems that come with them, as well as some future speculation. The scrollbar quirks of various operating systems Which means you can get cross-browser styles with just this. I do want to mention the postcss-scrollbar plugin that generates the -webkit prefixed scrollbar properties from the standard ones. I recommend Ahmad Shadeed's scrollbar guide if you're not already familiar with these properties. ![]() There have been countless posts on this topic, so I won't bother repeating those parts. There's more to it, but this is all you need to make the default scrollbars show up.Īs for styling the scrollbars, you can use the -webkit prefixed scrollbar properties combined with the standard scrollbar-width and scrollbar-color properties. When the content of an element is too big to fit in it, we can use overflow: auto to make it scrollable. Let's look at some of the things we can do in 2022 to improve the scrolling experience for our users. While it's a good thing that most of us (hopefully) aren't writing thousands of lines of JavaScript to recreate scrollbars, we should be paying at least a little more attention to them. So it is understandable that frontend developers don't pay much attention to them. Historically, it has been difficult to consistently customize scrollbar styling on the web. A very mundane thing that every website and app has.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |