This sounds like there should be a solution for it all over the internet, but I am not sure why I cannot find it. I want to disable Horizontal scrolling on mobile devices. Basically trying to achieve this:
body{
overflow-x:hidden // disable horizontal scrolling.
}
This may be relevant information: I also have this in my head tag, because I also do not wish the user to be able to zoom:
<meta content='width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;' name='viewport' />
<meta name="viewport" content="width=device-width" />
Thanks
After having no success trying all the answers I managed to turn my mobile scroll off by simply adding:
html,
body {
overflow-x: hidden;
height: 100%;
}
body {
position: relative;
}
Its important to use %
not vh
for this. The height: 100%
was something I had been missing all along, crazy.
Setting position to relative does not work for me. It only works if I set the position of body to fixed:
document.body.style.position = "fixed";
document.body.style.overflowY = "hidden";
document.body.addEventListener('touchstart', function(e){ e.preventDefault()});
For future generations:
To prevent scrolling but keep the contextmenu, try
document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });
It still prevents way more than some might like, but for most browsers the only default behaviour prevented should be scrolling.
For a more sophisticated solution that allows for scrollable elements within the nonscrollable body and prevents rubberband, have a look at my answer over here:
This works for me:
window.addEventListener("touchstart", function(event){
if(event.target.tagName=="HTML" || event.target.tagName=="BODY"){
event.preventDefault();
}
} ,false);
It does not work 100% and I also added this:
window.addEventListener("scroll",function(){
window.scrollTo(0,0)
},false)
The simplest way which is pretty much straight forward with only CSS Codes:
body, html {
overflow-x: hidden;
position: relative;
}
_x000D_
Try adding
html {
overflow-x: hidden;
}
as well as
body {
overflow-x: hidden;
}
use this in style
body
{
overflow:hidden;
width:100%;
}
Use this in head tag
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
The following works for me, although I did not test every single device there is to test :-)
$('body, html').css('overflow-y', 'hidden');
$('html, body').animate({
scrollTop:0
}, 0);
This prevents scrolling on mobile devices but not the single click/tap.
document.body.addEventListener('touchstart', function(e){ e.preventDefault(); });
The CSS property touch-action may get you what you are looking for, though it may not work in all your target browsers.
html, body {
width: 100%; height: 100%;
overflow: hidden;
touch-action: none;
}
cgvector answer didn't work for me, but this did:
document.body.addEventListener('touchstart', function(e){ e.preventDefault(); });
I wouldn't leave it just like that, a smarter logic is needed to select when to prevent the scrolling, but this is a good start.
Taken from here: Disable scrolling in an iPhone web application?
In page header, add
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-sacle=1, maximum-scale=1, user-scalable=no">
In page stylesheet, add
html, body {
overflow-x: hidden;
overflow-y: hidden;
}
It is both html and body!
I suspect most everyone really wants to disable zoom/scroll in order to put together a more app-like experience; because the answers seem to contain elements of solutions for both zooming and scrolling, but nobody's really nailed either one down.
To answer OP, the only thing you seem to need to do to disable scrolling is intercept the window's scroll
and touchmove
events and call preventDefault
and stopPropagation
on the events they generate; like so
window.addEventListener("scroll", preventMotion, false);
window.addEventListener("touchmove", preventMotion, false);
function preventMotion(event)
{
window.scrollTo(0, 0);
event.preventDefault();
event.stopPropagation();
}
And in your stylesheet, make sure your body
and html
tags include the following:
html:
{
overflow: hidden;
}
body
{
overflow: hidden;
position: relative;
margin: 0;
padding: 0;
}
However, scrolling is one thing, but you probably want to disable zoom as well. Which you do with the meta tag in your markup:
<meta name="viewport" content="user-scalable=no" />
All of these put together give you an app-like experience, probably a best fit for canvas.
(Be wary of the advice of some to add attributes like initial-scale
and width
to the meta tag if you're using a canvas, because canvasses scale their contents, unlike block elements, and you'll wind up with an ugly canvas, more often than not).
Source: Stackoverflow.com