How to Disable the Horizontal HTML Style Scrollbar


You might think that all browser features are inaccessible, but that is not true. Site designers with a little Cascading Style Sheet (CSS) knowledge can manipulate some browser features, such as the scroll bar. Horizontal and vertical scroll bars appear on a webpage when the page's content exceeds the browser's dimensions. This allows users to view that content by adjusting the scroll bars. To disable the horizontal scroll bar, you can add a single CSS property to your HTML document.

  • Open your HTML editor and load any HTML document.

  • Paste the following code into your document's "head" section:

    <style type="text/css">

    html {




    This CSS declaration defines the HTML element's "overflow" property. By setting that property's value to "hidden," you prevent horizontal scroll bars from appearing in the browser.

  • Paste the following text into the document's "body" section:


    Adding a long text string such as this causes most browsers to display a horizontal scroll bar. By adding this text to your HTML document, you can verify that the CSS declaration you made in Step 2 prevents the scroll bar from appearing.

  • Save your document and view it in a browser. You will not see a horizontal scroll bar. Minimize the browser to half its size. A horizontal scroll bar will still not appear.

Tips & Warnings

  • To prove that the CSS code disabled the horizontal scroll bar, return to the "style" section and replace the word "hidden" with "auto." This tells browsers to display the horizontal scroll bar when content overflows horizontally. Remember that users will not be able to view such content because they will have no horizontal scroll bar.

Related Searches


Promoted By Zergnet



Related Searches

Check It Out

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

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