DISABLE the Horizontal Scroll
HtmlCssHtml Problem Overview
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/</strike> (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:
Html Solutions
Solution 1 - Html
Try adding this to your CSS
html, body {
max-width: 100%;
overflow-x: hidden;
}
Solution 2 - Html
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.
Solution 3 - Html
I know it's too late, but there is an approach in javascript that can help you detect witch 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="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 :]
Solution 4 - Html
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%;
}
Solution 5 - Html
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;
Solution 6 - Html
Try this one to disable width-scrolling just for body
the all document just is body
body{overflow-x: hidden;}
Solution 7 - Html
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..!!!!
Solution 8 - Html
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.
Solution 9 - Html
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.
.
Solution 10 - Html
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.
Solution 11 - Html
.name
{
max-width: 100%;
overflow-x: hidden;
}
You apply the above style or you can create function in javaScript to solve that problem
Solution 12 - Html
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.