How to Hide a Scrollbar With JavaScript
Web browsers react differently to different browser settings because of the way browser specifications have been interpreted or implemented. You can hide scrollbars using JavaScript, but there are different settings to change based on whether the user's browser is Internet Explorer or something other than IE. For IE, you can hide scrollbars by changing the "scroll" attribute of the document body. In other browsers, you hide scrollbars by changing the "overflow" style attribute.
Other People Are Reading
Instructions
-
-
1
Create a new HTML file using an editor or the Notepad. Enter an HTML skeleton for the file. For example, type:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Hide Scrollbars</title>
</head>
<body>
</body>
</html>
-
2
Create a JavaScript function and insert it between the "head" tags in the HTML document. Set the document style overflow attributes to "hidden" for non-IE browsers and set the scroll attribute of the document body to "no" for Microsoft Internet Explorer. For example, type:
<script type="text/javascript">
function hideScrollBars() {
document.documentElement.style.overflowX = "hidden";
document.documentElement.style.overflowY = "hidden";
document.body.scroll = "no"; // Internet Explorer
}
</script>
</head>
-
-
3
Create a form with a button that will hide the scroll bars. When a user clicks the button, call the JavaScript function that hides the scroll bars. For example, type:
<body>
<form name="myForm"><input type="button" name="button" value="Hide" onclick="hideScrollBars()"/></form>
</body>
</html>
-
1
