Complete removal of horizontal scrollbar

Is there a way to get compl开发者_开发知识库etely rid of the horizontal scrollbar on a webpage?

The command "overflow-x:hidden;" on body/html hides the visual style, but the functionality is actually still there if you use the arrows on your keypad, which kind of sucks...

---

You ask how to get rid of the scrollbar, and yes, overflow: hidden is the way to go.

If the question is about how to avoid scrolling, your best approach is to design web pages that don't overflow, possibly using a combination of dynamic fluent designs and media queries to keep width and height of your content contained.

But I would actually recommend against that. There is no way for you to know beforehand what size of window your visitors will have. Have you thought of the useability differences in large screens and small screens? How about mobile browsers?

If you are really fixed on never allowing scroll, you could use the following css as a sneaky-devil trick:

body {
    position: fixed;
    left: 0px;
    top: 0px;
}

But as I said, I wouldn't recommend it... Also, it probably won't work with older browsers. IE6 comes to mind. Maybe IE7 also...

---

You can't disable the users ability to scroll, you can only disable the visual helpers (eg. scrollbars). If you don't want any scrolling you have to keep the width of your pages below the width of the viewport of the browserwindow. You can do that by flowing and resizing the elements based on the viewport-size.

---

Sadly there is only a non-CSS way to fix that: You have to prevent scrolling with JavaScript using onscroll. Don't expect preventDefault() to work though - you have to be more creative:

1. Use scrollTo(0,0)
2. Or
   • prevent all arrow/page-key input
   • prevent all mouse wheel input

Check out the answer on a different question: How to disable scrolling temporarily?.