Tips, Expertise, Articles and Advice from the Pro's for Your Website or Blog to Succeed
We had a bug a little while back where we were accessing an old database for the GeoIP API.
That meant that, for users whose geolocation were mapped from their IP address, it was incorrect/unknown for IP subnets not in the database.
Now, 1-2 years later, can we go back and retroactively retrieve the correct location for each of those IP addresses with a more updated database? Or, is it possible, for example, that ISPs may recycle IP addresses across different cities/states?
Scrollbars are natural progress meters. How far the scrollbar is down or across is how much progress has been made scrolling through that element (often the entire page). But, they are more like progress indicators than meters, if you think of a meter as something that “fills up” as you go.
We can use some CSS trickery to make the scrollbar fill up as we go.
This will only work with -webkit- vendor-prefixed scrollbar-styling properties. In other words, these are non-standard. The standardized scrollbar styling properties are scrollbar-width and scrollbar-color, which can’t pull this kind of thing off, but are probably a safer bet in the long run. Still, the vendor-prefixed versions probably aren’t going anywhere, so if you consider this a weird form of progressive enhancement, that’s probably fine.
Essentially, it’s hanging a huge box-shadow off the top of the scrollbar thumb — or off the side if it’s a horizontally scrolling element.
:root {
--shadow: #43a047;
--scrollbarBG: #eee;
--thumbBG: #66bb6a;
}
::-webkit-scrollbar {
width: 16px;
}
::-webkit-scrollbar-track {
background: var(--scrollbarBG);
}
::-webkit-scrollbar-thumb {
background-color: var(--thumbBG);
box-shadow: 0 -100vh 0 100vh var(--shadow), 0 0 15px 5px black;
}I first saw this in a Pen by Myk.
That example didn’t differentiate the thumb part of the scrollbar at all, which makes it more meter-like, but also harder to use. My demo has a slightly different color thumb.
No! Aside from it being super weird and non-standard. Safari flips it’s lid and I have no idea how to fix it.
I do happen to have a favorite CSS trick that is highly related to this though.
Cool, here you go.
The post CSS Scrollbar With Progress Meter appeared first on CSS-Tricks.