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:
Try adding this to your CSS
html, body {
max-width: 100%;
overflow-x: hidden;
}
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.
If you want to disable horizontal scrolling over the entire screen width, use this code.
element {_x000D_
max-width: 100vw;_x000D_
overflow-x: hidden;_x000D_
}
_x000D_
This works better than "100%" because it ignores the parent width and instead uses the viewport.
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..!!!!
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 :]
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%;
}
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.
.name
{
max-width: 100%;
overflow-x: hidden;
}
You apply the above style or you can create function in javaScript to solve that problem
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.
.
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.
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;
Try this one to disable width-scrolling just for body
the all document just is body
body{overflow-x: hidden;}
Source: Stackoverflow.com