Removing Page Scrollbars in IE8 (Overflow:Hidden Not Working)

removing page scrollbars in IE8 (overflow:hidden not working)

It depends on whether IE8 is rendering the page in Standards or Quirks mode. For example, the following HTML will be displayed without a scrollbar:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en-US" lang="en-US">
<head>
<title>test</title>
</head>
<body>
<p>hello</p>
</body>
</html>

But if you remove the doctype declaration, IE8 renders the page in Quirks mode:

<html>
<head>
<title>test</title>
</head>
<body>
<p>hello</p>
</body>
</html>

You can also check this by forcing the rendering mode with the Developer Tools. Press F12 on a page, and at the end of the menu bar (for some reason...) there's a "Document Mode" setting. Toggling between Standards and Quirks here should also toggle the scrollbar.

So... you need to make your page adhere to an HTML standard! It need not be XHTML Strict, it could be HTML 4, or even XHTML Transitional if you really must.

The W3C Validator can help you with any validation errors.

Is there a way to hide the scrollbars in IE8?

You can use the CSS overflow property to hide the scrollbars:

html, body {
overflow: hidden;
}

Removing IE's scrollbar

See here for fiddle using your current code

Try this trick

body, div, html{
height:100%;
width:100%;
padding:0;
margin:0;
}
body{
overflow:hidden;
position:fixed;
}
div{
overflow-y:scroll;
position:relative;
right:-20px;
}

It offsets a scrollable div so its vertical scrollbar is outside the viewable area.

Website not displaying scroll bar in IE 8 (Not overflow)

consider putting this in your CSS to force the vertical scrollbar:

html {
height: 101%; /* setting height to 101% forces scroll bar to display */
}

Hide scroll bar, but while still being able to scroll

Just a test which is working fine.

#parent{
width: 100%;
height: 100%;
overflow: hidden;
}

#child{
width: 100%;
height: 100%;
overflow-y: scroll;
padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */
box-sizing: content-box; /* So the width will be 100% + 17px */
}

Working Fiddle

JavaScript:

Since the scrollbar width differs in different browsers, it is better to handle it with JavaScript. If you do Element.offsetWidth - Element.clientWidth, the exact scrollbar width will show up.

JavaScript Working Fiddle

Or

Using Position: absolute,

#parent{
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
}

#child{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: -17px; /* Increase/Decrease this value for cross-browser compatibility */
overflow-y: scroll;
}

Working Fiddle

JavaScript Working Fiddle

Information:

Based on this answer, I created a simple scroll plugin.

How to disable default scroll bar for textareas in IE8?

I can't test on IE8 right now, but I can tell you that this works in IE6:

textarea {
overflow-y: auto;
}

iframe scrollbars not showing in IE8

I had to set the height on the page that is being displayed in the iframe.

It was tricky due to the fact that the page is actually a sharepoint webpart with everything being created dynamically in VB

Thanks for your answers.



Related Topics



Leave a reply



Submit