DISABLE the Horizontal Scroll

Question

Ok for some reason my webpage scrolls from left to right and shows a lot of ugly space.

I have searched for results but they just made the scrollbar HIDDEN

That's now what I want, I want to physically DISABLE the horizontal scroll feature. I do not want the user to be able to scroll left to right on my page just up and down!

I have tried: overflow-x:hidden in css on my html tag but it only made the scrollbar hidden and did not disable the scroll.

Please help me!

Here is a link to the page: http://www.green-panda.com/usd309bands/ (Broken link)

This might give you a better idea of what I am talking about:

This is when the first pages loads:

And this is after I scroll to the right:

Answer 1

Try adding this to your CSS

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

Answer 2

You can try this all of method in our html page..

1st way

body { overflow-x:hidden; }

2nd way You can use the following in your CSS body tag:

overflow-y: scroll; overflow-x: hidden;

That will remove your scrollbar.

3rd way

body { min-width: 1167px; }

5th way

html, body { max-width: 100%; overflow-x: hidden; }

6th way

element { max-width: 100vw; overflow-x: hidden; }

4th way..

var docWidth = document.documentElement.offsetWidth; [].forEach.call( document.querySelectorAll('*'), function(el) { if (el.offsetWidth > docWidth) { console.log(el); } } );

Now i m searching about more..!!!!

Answer 3

There is an approach in javascript that can help you detect which html element is causing the horizontal overflow -> scrollbar to appear

Here is a link to the post on CSS Tricks

var docWidth = document.documentElement.offsetWidth;
[].forEach.call(
  document.querySelectorAll('*'),
  function(el) {
    if (el.offsetWidth > docWidth) {
      console.log(el);
    }
  }
);

it Might return something like this:

<div class="class-of-the-div-with-extra-width">...</div>

then you just remove the extra width from the div or set it's max-width:100%

Hope this helps!

It fixed the problem for me :]

Answer 4

So to fix this properly, I did what others here did and used css to get hide the horizontal toolbar:

.name {
  max-width: 100%;
  overflow-x: hidden;
}

Then in js, I created an event listener to look for scrolling, and counteracted the users attempted horizontal scroll.

var scrollEventHandler = function()
{
  window.scroll(0, window.pageYOffset)
}

window.addEventListener("scroll", scrollEventHandler, false);

I saw somebody do something similar, but apparently that didn't work. This however is working perfectly fine for me.

Answer 5

this is the nasty child of your code :)

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 1170px;
}

replace it with

.container, .navbar-static-top .container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
width: 100%;
}

Answer 6

koala_dev answered that this will work:

html, body {
   max-width: 100%;
   overflow-x: hidden;
}

And MarkWPiper comments that ":-/ Caused touch / momentum scrolling to stop working on iPhone"

The solution to keep touch / momentum on iPhone is to add this line inside the css block for html,body:

    height:auto!important;

Answer 7

Try this one to disable width-scrolling just for body the all document just is body body{overflow-x: hidden;}

Answer 8

If you want to disable horizontal scrolling over the entire screen width, use this code.

element {
  max-width: 100vw;
  overflow-x: hidden;
}

This works better than "100%" because it ignores the parent width and instead uses the viewport.

Answer 9

Koala_dev's answer will work, but in case you are wondering this is the reason why it works:

.
q.html, body {              <--applying this css block to everything in the
                             html code.

q.max-width: 100%;          <--all items created must not exceed 100% of the 
                             users screen size. (no items can be off the page 
                             requiring scroll)

q.overflow-x: hidden;       <--anything that occurs off the X axis of the 
                             page is hidden, so that you wont see it going 
                             off the page.     

.

Answer 10

I just had to deal with it myself. After all I found this method most easy and useful. Just add

overflow-x: hidden;

To your outer parent. In my case it looks like this:

<body style="overflow-x: hidden;">

You have to use overflow-x because if you use simply use overflow you disable the vertical scrolling too, namely overflow-y

If the vertical scrolling is still disabled you can enable it explicitly with:

overflow-y: scroll;

I know its somewhat not a proper way because if everything was setup well one would not have to use this quick and dirty method.

Answer 11

You can override the body scroll event with JavaScript, and reset the horizontal scroll to 0.

function bindEvent(e, eventName, callback) {
    if(e.addEventListener) // new browsers
        e.addEventListener(eventName, callback, false);
    else if(e.attachEvent) // IE
        e.attachEvent('on'+ eventName, callback);
};

bindEvent(document.body, 'scroll', function(e) {
    document.body.scrollLeft = 0;
});

I don't advise doing this because it limits functionality for users with small screens.

Answer 12

.name 
  { 
      max-width: 100%; 
       overflow-x: hidden; 
   }

You apply the above style or you can create function in javaScript to solve that problem