Scrollbar Width Hack

Have you ever wanted to line something up with the right side of the content of an element with a scrollbar, but were frustrated because scrollbar widths vary by browser (including mobile ones where they might not be visible)? Yeah, me too. I just made a demo page of a hack for that. It creates an invisible element with a scrollbar on it for positioning.  This seems to do what I need right now.  What would be the best, but I don’t have an answer for, is a way to do something like this only taking into account whether the visible element with the scrollbar has a scrollbar or not.  My solution is to make sure it always does.  Doing the same thing when it might not is the next question.  I can think of a couple of ways to do this with JavaScript, but I wanted to do it with CSS.

My Warped Sense of Humor

Image

I get bored of right angles and since this is my blog, and I can do what I want with it, I’ve made some changes to the mobile design.  The base theme is Carrington-mobile-1.2. I added some of my own CSS to it to change the colors and to make it  more, well, me.  I used CSS3 to rotate some stuff.  Perhaps it’s a bit subtle.  I think someone is going to be holding his or her phone and twisting it around trying to make the lines straighten out, then wondering what’s wrong.  That might be really bad design, but it’s also funny.  I hadn’t intended to annoy anyone, just to do something a bit different and have some fun.