How do I totally disable scrolling in all browsers?

Question

Here's a fun one! :P This question has been asked here before but none of the answers I've found work for me.

I'm making a web-app and I need the user to use the buttons provided to navigate horizontally between the div's, with manual horizontal scrolling disabled on all browsers for both desktop and touch devices. I assume this requires jQuery? BONUS POINTS: Also if I could disable android zoom, and general vertical scrolling so that my y-scroll is div-specific to make sure the maindiv stays at the top of the window) that would be a huge bonus!

Notes: The app will do all the visual scaling and navigation legwork just like any other app, so please don't bother mentioning that it's unadvised on behalf of end-user accessibility :) Also, overflow-x:hidden; won't work for touch devices. width:100%; definitely won't work because of its use for fitting content to browser width, so I'm guessing jQuery is where my answer lies??

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
    <script type="text/javascript" src="jquery-1.10.2.js"></script>
    <style type="text/css">
         /*body     {overflow-x: hidden;}*/
        .maindiv    {width:400%; position: relative;}
        .sub        {width:25%; float:left;}
        .content    {width:100%; background: yellow;}
        .forward    {width:20%; background:orange;}.forward:hover{cursor:pointer;}
        .back       {width:20%; background:pink;}.back:hover{cursor:pointer;}
    </style>
</head>
<body>
    <div class="maindiv">
        <div class="sub">
            <div class="content">Page 1</div>
            <div class="forward">forward</div>
        </div>
        <div class="sub">
            <div class="back">back</div>
            <div class="content">Page 2</div>
            <div class="forward">forward</div>
        </div>
        <div class="sub">
            <div class="back">back</div>
            <div class="content">Page 3</div>
            <div class="forward">forward</div>
        </div>
        <div class="sub">
            <div class="back">back</div>
            <div class="content">Page 4</div>
        </div>
    </div>

    <script>
        $(document).ready(function(){
            $(".forward").click(function(){
            $(".maindiv").animate({left:'-=100%'});});})
        $(document).ready(function(){
            $(".back").click(function(){
            $(".maindiv").animate({left:'+=100%'});});})
    </script>

</body>
</html>

possible duplicate of [Hiding the scrollbar on an HTML page](http://stackoverflow.com/questions/3296644/hiding-the-scrollbar-on-an-html-page) — i'm PosSible, Mar 26 '14 at 05:09

LartTyler · Accepted Answer · 2014-03-26T05:11:43.497

2

It's actually pretty straightforward with CSS! Just add this to your stylesheet:

html, body {
    overflow: hidden;
}

Also (someone might need to verify this) IIRC, you can add zoom: 1 to your body, and that should take care of your zooming on mobile devices. I might be wrong about that (I don't have an easy way to test that out ATM) but if no one can correct me I'll take a look when I can and get back to you!

Edit: My mistake... You'll (most likely) need this as well.

.sub {
    width: 100%;
    height: 100%;
}

That way, each div (kind of like a slide in a slideshow) will fit the entire screen, but the extra "frames" will be hidden, thanks to the overflow: hidden on your body and html tags.

edited Mar 26 '14 at 05:11

answered Mar 26 '14 at 05:03

LartTyler

121
1
8

1

I might be wrong, but I think it should be `html, body` as window is not a physical element. – Chad Mar 26 '14 at 05:04
Yep, that's my mistake. It's late xD Gonna go correct that right now haha. Thanks for pointing that out! – LartTyler Mar 26 '14 at 05:05
You guys are geniuses...I tried it on just the body and it didn't work, so I definitely need the html, before it. Solved that one!! :D Adding Zoom: 1 to the html, body css didn't cut it thought for the android zoom. And I can't use width 100% on sub, that has to stay 25% since there are 4 of them fitting in the "100%" width. I tried 100% on the height and that didn't keep my maindiv at the top, doesn't height and width % need to be cascaded down from it's first grandfather div? – user3424554 Mar 26 '14 at 05:24
Aha... Yes, you're correct. When I was typing my example, I completely forgot you had the `.sub` elements inside a parent other than the body. – LartTyler Mar 26 '14 at 13:35

DexJ · Answer 2 · 2014-03-27T07:05:30.260

0

Set overflow: hidden; on the body tag like this:

<style type="text/css">
html,body {
overflow:hidden;
}
</style>

-> code above hides both horizontal and vertical scrollbar.

->and if you want to hide only vertical or horizontal scrollbar try,

    overflow-x:hidden; //for horizontal scrollbar 
    overflow-y:hidden; // for Vertical scrollbar

edited Mar 27 '14 at 07:05

answered Mar 26 '14 at 05:07

DexJ

1,264
13
24

Thanks! I tried doing this just on the body tag but it didn't work. As per above I actually needed to put html, ahead of it! :) Any idea about the android zoom? – user3424554 Mar 26 '14 at 05:24

How do I totally disable scrolling in all browsers?

2 Answers2