HOUSE of CODE

Remove the scroll bar from a web page

Yossi Shmueli -

A couple of months ago I was performing maintenance on the main page of my team's web site. One of the things I noticed is that the page contains a disabled scroll bar which is not used. So I wanted to remove it to give more space in the page for other stuff (especially the Map. The site is a GIS site). So after a little reading in the MSDN I found that there is a CSS property which is responsible for this.
It is called overflow.

The property can have the following values:

  • visible: If components in the page exceeds the boundaries of the container then they will simply be shown.
  • hidden: Only the parts that doesn't exceeds the container's boundaries will be shown.
  • auto: When the components exceeds the boundaries, a scroll bar will be shown, that will allow to scroll.
  • inherit

In the body element the default value is auto, which means that the vertical scroll bar will always be shown, even when it's not in use.
In div elements the default is visible.

So I changed that definition to hidden:

<body style="overflow:hidden">

And the scroll bar disappeared.

A month later we started a new project, in which I had to create a new main page. And again the unnecessary scroll bar appeared. So I tried the same thing, setting the overflow property to hidden. But the scroll bar didn't want to disappear!.
I debugged again and again, but I couldn't removed it. Meanwhile the project was canceled, and I moved on to other things.

Two days ago I started to develop a new page for our current project. And again, the same problem. This time I decided I must understand why the overflow property is being ignored. I started to look for differences between the new page and the main page. After a little while I found that the DOCTYPE definition in the main page was different:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

In the new page it was:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

What do this mean? First, lets understand what DOCTYPE means.

DOCTYPE

DOCTYPE is an element in an HTML page which defines the DTD (Document type definition) of the page. The DTD defines the structure and format of the XML schema to which the HTML document complies with.
The browser knows to look for this definition in each page, and to validate the page's structure accordingly.

Then the browser ignores all the attributes and tags which didn't passed the validation.

The main page, which was created a long time ago, has the default DOCTYPE of HTML 4.0. The new page , which was created in VS2005 ,had XHTML 1.0 as the DOCTYPE. This is a newer format which is more strict.

So, if I replaced the DOCTYPE in the new page, the scroll bar will disappear. And it did.

But I wanted to find a more general way to do make it disappear, which is not dependant on the DOCTYPE. So I searched and found the scroll attribute, which can be applied to the body element:

<body scroll="no">

The default of this attribute on the body is yes.
By setting it to no, the scroll bar disappeared in both cases.

This solution has two problems:

  • For some reason, the designer in Visual Studio, thinks the attribute is not legal in the body element (although I checked and it is valid in XHTML 1.0 and HTML 4.0. The proof: It works in both cases!).
  • This attribute can not be changed via CSS. It's an element attribute and not a CSS attribute. It's quite problematic because I want to all the visual aspects of my page to be in a CSS file. This is a visual aspect which can only be set in the page itself.

If you can think of a better solution, I will be glad to read your thoughts.

P.S.: To learn more about XHTML: http://www.sitepoint.com/xhtml-introduction/

Shabat Shalom (Enjoy the heat...)