- 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.
Source...