How to Hide Scroll Boxes
Scroll boxes appear at the side of your Web browser when there is more content below the screen window. They appear automatically with default styles applied to the size, up and down arrows, color and more. You can hide scroll bars and ensure complete control over your page by modifying the CSS or header file code and changing the overflow property to prevent browsers from automatically generating scroll boxes.
Other People Are Reading
Instructions
-
CSS
-
1
Open your computer's Web browser and visit your website or page. Select "View Source" from the Page menu in Internet Explorer, "Page Source" from the View menu in Firefox or right-click and choose "View Page Source" in Chrome. Look through the code and confirm which site classes are applied to the section where you'd like to remove scroll boxes. If you'd like to remove scroll boxes from the entire site, confirm which classes apply to all content.
-
2
Locate the appropriate CSS editor for your page site. The CSS editor is under the "Edit Profile" section, or in "Editor" under the Appearance sidebar menu in Wordpress for instance. You may also have a separate CSS file for your site.
-
-
3
Locate the appropriate class that generates scroll boxes in the code. Locate the line "overflow:scroll;" and delete it if it exists. Add the code "overflow: hidden;". This will hide your scroll boxes and clip the content that does not appear in the box so that it is invisible to site visitors.
-
4
Save the updated CSS file and confirm that scroll boxes are hidden.
JavaScript
-
5
Open your computer's Web browser and visit your website or page. Select "View Source" from the Page menu in Internet Explorer, "Page Source" from the View menu in Firefox or right-click and choose "View Page Source" in Chrome. Look through the code and confirm which site classes are applied to the section where you'd like to remove scroll boxes. If you'd like to remove scroll boxes from the entire site, confirm which classes apply to all content.
-
6
Locate the appropriate HTML editor for your page or site.
-
7
Insert the following Javascript below the <head> tag: <script type="text/javascript">
function hideOverflow() { document.getElementById("CLASS NAME").style.overflow="hidden"; } </script>. Replace "CLASS NAME" with the name of the element that has scroll boxes.
-
8
Save the updated header file and confirm that scroll boxes are hidden.
-
1
References
- Photo Credit website layout image by 6922Designer from Fotolia.com
