How to prevent “jerking” of page in browser

Question

What is this "Jerking" - On this page scroll right to the top, then if you're using a mac use two fingers and scroll up more... the page will scroll further up (page moves downwards) revealing a gray area and bounce back up after you lift your fingers off the touchpad.

Question is how do i prevent this "jerking" effect with CSS or JavaScript?

I know it's possible because if you go to facebook or pinterest and click on an image you get a lightbox. In that lightbox "mode" you won't get this "jerking" effect.

I initially thought it's something to do with lightboxes or css fixed positioning but even in http://lokeshdhakar.com/projects/lightbox2/ "mode" it still "jerks". How did fb and pinterest do it?

ps. use chrome or safari. firefox doesn't have this effect.

Answer 1

Facebook seems to accomplish this by setting the CSS attribute "overflow: hidden" on the document body when a picture is displayed. I just tested it myself by adding the following CSS to an HTML file and the bounceback scrolling was disabled.

<style type="text/css">
body {
    overflow: hidden;
}
</style>

Of course, this will prevent your page from scrolling at all. I agree with Quentin, this is standard UI behavior and you shouldn't change it unless you have a good reason.