Stop a page from scrolling when showing a hidden div

Question

I have a tab pane that is inside a fixed size div, whenever that tab is switched to one that is larger than the outer div the entire page is scrolling down such that I cannot see my tabs anymore, I've mocked it up in jsfiddle to show the problem.

Note that in order to see the problem the page must be smaller than the containing div.

jsFiddle

Anyone know how I can stop the page from scrolling down when the tabs switch without using javascript?

Answer 1

If you want to use „pure” JavaScript, use:

function stopScroll()
{
    document.getElementById("body_id").style.overflow = "hidden";
}

function startScroll()
{
    document.getElementById("body_id").style.overflow = "auto";
}

Answer 2

Thanks for showing me the evt.preventDefault() It got me to look in the right spot. The link when clicked points to my hidden div which the page then scrolls down to.

To stop the scrolling I can also just remove the id from the href attribute to something else,

jsFiddle

Answer 3

Without using JavaScript? Cannot be done.

Using JavaScript it's easy:

evt.preventDefault();

http://jsfiddle.net/vVJY4/3/

Answer 4

All you have to to is evt.preventDefault();:

http://jsfiddle.net/vVJY4/2/