Removing a Vertical Scrollbar in JavaScript
Scrollbars give your website's viewers an easy way to navigate long blocks of text if they don't have monitors large enough to display all the content simultaneously, but on a carefully designed website automatic scrollbars can also be unsightly and unhelpful. Because scrollbars can be controlled through CSS, they can be removed on the fly via JavaScript, making use of JavaScript's "style" attributes.
Other People Are Reading
Instructions
-
-
1
Open your webpage's source code in an HTML editor or a plain text editor like the one included with your operating system. In the header of your webpage (the code between the "<head>" and "</head>" tags) add the following code, creating a JavaScript function to hide scrollbars:
<script type="Text/JavaScript">
<!--
function hidescrollbars(id) {
document.getElementById(id).style.overflow="hidden";
}
-->
</script>
-
2
Scroll down to the page element that is currently being displayed with a scrollbar and check the element's "id"; if it doesn't have one, add a unique tag -- for example: "<div id='this_is_a_unique_id' class='...' style='...'>" will assign the id "this_is_a_unique_id" to the div.
-
-
3
Add a new line following the closing tag of the element with a simple <div> tag used to trigger the hiding of the other element's scrollbars using its unique ID. For example:
<div style="border: 2px solid black;" onclick="hidescrollbars('this_is_a_unique_id)">Hide</div>
Change "this_is_a_unique_id" to the ID of the element.
-
4
Save the file and open the webpage in your browser; when you click the "Hide" button in the document, the vertical scrollbar attached to the other element will disappear.
-
1
Tips & Warnings
The hidescrollbars() function can be called by other JavaScript events as well; for example, to hide the scrollbar of a <div> element when that element when the reader moves their mouse over it, add the line "onmouseover=hidescrollbars('this_is_a_unique_id')" as an attribute of that element's opening tag.
To hide scrollbars by default, or when the page loads, use CSS instead: inside the element's opening tag, add the following attribute: "style='overflow: hidden;'" to prevent the scrollbar from loading in the first place.
