4 ms·
I recently discovered how Facebook do their fade-in thin scroll elements in the messenger[1] web app. They actually size the DIVs too wide by about 20+ pixels,
by Jaruzel 10y ago
I recently discovered how Facebook do their fade-in thin scroll elements in the messenger[1] web app. They actually size the DIVs too wide by about 20+ pixels, then they alter the z-order so that the DIV edge (where the native scrollbar is) is hidden under another DIV (or over the window bounds). Then they overlay their own scroll bar element at the new visible edge of the DIV and hook it to the div scroll event.
It's one of the worst CSS kludges I have ever seen. I don't know enough about cross browser compatibility though to know if there's a better way?
--
[1] https://www.messenger.com https://www.messenger.com
- taejavu 10y agoKludge it may be, but if it allows them to have custom scrollbars without replacing native scrolling, it's absolutely the lesser evil.
- Flow 10y agoI've set OS X to always show the scroll bars, and wondered why they disappear on Facebook. Their custom scroll bar looks identical to the native one. The whole thing they made feels pointless and user hostile.
- pluma 10y agoNon-macOS-user here. I always wondered why the Messenger webapp looked so weird. It just dawned on me that they're trying to emulate Apple design to the t. It's like running a Java app with the emulated look-and-feel for the wrong OS.
- oddlyaromatic 10y agoThis actually sounds a pretty low cost way to make an important visual change without abandoning the behavior underneath it. User don't know or care about it. Until there is a standard way to do this, a funky CSS hack that adds a few otherwise unneeded elements is more cognitive load for the programmers, but users don't care. And eventually weird kludges like this influence what features get worked on. I hope!