CODEWITHSUNDEEP
htmlcssgoogle-chromeoverflow
Podelo
Podelo

Reputation: 386

Disable scroll in Chrome

I need to disable a scroll in my HTML page on Chrome. I write the overflow:hidden so that hide the scroll bar and disable mouse wheel in Firefox and Internet Explorer. It still be possible to scroll in firefox with the click on mouse wheel but I don't care about that.

So the overflow:hidden just hidden the scrollbar in Chrome but we can still scroll with the mouse wheel.

I make a JSFiddle here but it throws some bugs with his own scroll bar so I recommend to you to create this simple html script to try:

<html>
<head>
<style>
body{
overflow:hidden;
}

div{
height:2000px;
width:1300px;
position: relative;
background-image:linear-gradient(blue, red);
}
</style>
</head>
<body>
<div></div>
<span>Test</span>
</body>
</html>

So how can we disable the scroll in chrome? Just for information I plan to make an Android application that's why Chrome is important to me.

EDIT: Chrome bug on my computer so tests aren't good but if you have an android you can navigate to my page here and you will notice the bug: you can scroll with your finger.

Upvotes: 2

Views: 19394

Answers (2)

andyrandy
andyrandy

Reputation: 73984

If it does not work with overflow:hidden alone, just use the window height too:

document.getElementById('yourDivId').style.height = window.innerHeight + 'px';

Here´s how to disable scrolling in the Android Chrome Browser:

document.addEventListener('touchmove', function(evt) {
    evt.preventDefault();
});

Of course you can enable it again with document.removeEventListener.

Upvotes: 1

Arun Bertil
Arun Bertil

Reputation: 4638

Try

UPDATE

Image enter image description here

HTML

<div  id="wrapper">

<div></div>
    </div>
<span>Test</span>

CSS:

#wrapper
{
    margin: 0 auto;
position: relative;
height:580px;
}

body {
    min-height: 580px;
    overflow: hidden;
}

div{
    height:2000px;
    width:1300px;
    position: relative;
    background-image:linear-gradient(blue, red);
}

html {
    overflow: auto;
}

Upvotes: 0

Related Questions