How to Remove Scrollbars

Save

Scrollbars are the horizontal and vertical bars on the right and bottom of a Web page. They are sometimes added within sections of a Web page. You can remove scrollbars to prevent scrolling across or below a page altogether. Alternatively, you can remove scrollbars until your content is too large for its designated area. The overflow property in cascading style sheets lets you manipulate scrollbars on a Web page. You can hide scrollbars from your entire page or a selected section and specify where scrollbars are removed.

Removing Scrollbar From Entire Web Page

  • Start a text editor, such as Notepad, TextPad or WordPad. Select "File" and "Open" from the menu. A dialog box opens. Double-click the HTML file that contains the scrollbars you want to hide.

  • Add the following code between the <HEAD> tag of your page to hide scrollbars completely even when your content is too large:

    <style type="text/css">

    <!--

    body { overflow:hidden; }

    html { overflow:hidden; }

    -->

    </style>

  • Add the following code between the <HEAD> tag of your page to hide scrollbars, but reveal them when your content is too large.

    <style type="text/css">

    <!--

    body { overflow:auto; }

    html { overflow:auto; }

    -->

    </style>

  • Replace "overflow;" with "overflow-x;" to only remove horizontal scrollbars or with "overflow-y" to only remove vertical scrollbars.

Removing Scrollbar From a Section

  • Open the HTML file you want to modify.

  • Insert the following code between the <HEAD> tag of your page to hide scrollbars completely even when your content is too large:

    <style type="text/css">

    <!--

    .noscrollbar { overflow:hidden; }

    -->

    </style>

  • Insert the following code between the <HEAD> tag of your page to hide scrollbars but reveal them when your content gets too large:

    <style type="text/css">

    <!--

    .noscrollbar { overflow:auto; }

    -->

    </style>

  • Replace "overflow;" with "overflow-x;" to only remove horizontal scrollbars or with "overflow-y" to only remove vertical scrollbars.

  • Add 'class="noscrollbar"' within the DIV or container where the scrollbar currently appears as follows:

    <div class="noscrollbar">Your content goes here.</div>

References

Promoted By Zergnet

Comments

You May Also Like

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

  • CSS Scrollbar Styles

    Cascading style sheets are versatile tools to create cohesive designs for websites. Among the many features that can be defined in a...

  • How to Add a Scrollbar

    A scrollbar is a graphical user interface object that lets a user scroll through content that doesn't fit in a window. On...

  • How to Control Scrollbars With Javascript

    Since JavaScript is a client-side language that runs on the common browser, it can be employed to display interactive web pages. JavaScript...

  • How to Hide a Scrollbar Arrow

    HTML codes allow you to customize virtually every aspect of your website including the scrollbars. If you want the scrollbars for every...

Related Searches

M
Is DIY in your DNA? Become part of our maker community.
Submit Your Work!