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

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

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

Related Searches

Check It Out

Geek Vs Geek: Robot battles, hoverboard drag race, and more

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