New Screencast: Forcing Scrollbars to Eliminate Centering Jumps
There is a new Screencast up in the new videos section. This one is about forcing the vertical scrollbar to eliminate the jump that you get on centered websites when going back and forth between pages that go beneath the “fold” and pages that don’t. I have written about this before, but this is one of those things that really benefits from a visual.
In this screencast I talk about how to force vertical scrollbars onto websites. Without doing this, pages with centered content can appear to “jump” to the left or right when going from a page that needs to vertically scroll to one that does not (and visa versa). I cover two different major techniques for doing this, since they both have their advantages and disadvantages between different browsers.
I also attempted to create an RSS Feed for the videos. I’m writing it by hand for now until I can figure out a better system. It seems to be working okay. The feed isn’t much to look at in a feed reader, but you are able to subscribe through iTunes and so they will be automatically downloaded for you. At the time of this writing it hasn’t been accepted into the directory yet (I think it takes some time), but you can subscribe manually by going to Advanced > Subscribe to Podcast, and then manually pasting in the feed address: http://feeds.feedburner.com/CSS-Tricks-Screencasts
Loading ...
1
Thanks for the screencasts. Enjoying them.
Comment by gregf — February 11, 2008 @ 4:21 pm
2
Not sure whether this might help for the specific task since I only just learned of it myself but see Page2rss
Comment by John — February 11, 2008 @ 5:03 pm
3
Great video Chris!
Is it also possible to move the whole page 8px to the right whenever a scrollbar is active?
Comment by Jeroen Keukendeur — February 13, 2008 @ 9:40 am
4
@John: That’s a pretty cool service they built, thanks for the link. Actually the feed for these videos needs to be formatted in a really specific way for itunes, so I don’t think that will work.
@Jeroen: That’s an interesting question. With straight CSS, no, I don’t think that’s possible. That seems like something that is possible with Javascript though. But I would have no idea how to do it…
Comment by Chris Coyier — February 13, 2008 @ 11:17 am
5
Thanks for the video. I allready knew this technique, but really liked your tutorial. You are doing it very well. I am waiting for the next one!
Comment by Edwin — February 13, 2008 @ 11:47 am
6
Unfortunately my connection is in and out so I haven’t been able to see the end of the video. The technique I’ve always used, which seems to work in all browsers is:
body, html {min-height:101%}(Variations on this were discussed in that previous post)
Comment by Darren Hoyt — February 13, 2008 @ 9:51 pm
7
Try this in your style tags…
html {
_overflow: scroll;
overflow: -moz-scrollbars-vertical;
}
Comment by ron — February 29, 2008 @ 10:46 am