CODEWITHSUNDEEP
javascriptcssoverflowmobile-safari
Francesco
Francesco

Reputation: 25239

How to disable scrolling on mobile Safari?

I have a long page, and I want to hide the content that goes underneath the "fold", and it should work on iPhone/iPad.

overflow:hidden applied to <body> does not seem to work on mobile Safari. I can't create a wrapper on the whole website to achieve that...

Do you know the solution?

Upvotes: 159

Views: 210633

Answers (18)

Okomikeruko
Okomikeruko

Reputation: 1173

I found many of these answers worked at first. But the moment the keyboard was initiated in iOS, it re-enabled the vertical scroll settings.

So I'm having to rebuild a new interface that is keyboardless.

Upvotes: 0

Yuriy Vovk
Yuriy Vovk

Reputation: 1

My version. Works in iOS

 if (isModalWindowClose) {
        document.querySelector('body').style.overflow = '';
        document.querySelector('html').style.overflow = '';
        
        const scrollY = document.body.style.top;
        
        document.querySelector('html').style.height = '';
        document.body.style.position = '';
        document.body.style.left = '';
        document.body.style.top = '';

        window.scrollTo(0, parseInt(scrollY || '0') * -1);

        document.querySelector('html').style['scroll-behavior'] = '';
    } else {
        document.body.style.top = `-${window.scrollY}px`;
        document.querySelector('html').style.height = `${window.innerHeight - 1}px`;
        
        document.body.style.position = 'fixed';
        document.body.style.left = '0';
        
        document.querySelector('body').style.overflow = 'hidden';
        document.querySelector('html').style.overflow = 'hidden';
        
        document.querySelector('html').style['scroll-behavior'] = 'unset';
    }

Upvotes: 0

Toge
Toge

Reputation: 393

I've worked with <body>and <div class="wrapper">

When popup opens ...

<body> gets a height of 100% and an overflow:hidden

<div class="wrapper"> gets position:relative;overflow:hidden;height:100%;

I use JS/jQuery to get the actual scrollposition of the page and store the value as data-attribut to body

Then i scroll to the scrollposition in the .wrapper DIV (not in window)

Here is my solution:

JS/jQuery:

// when popup opens

$('body').attr( 'data-pos', $(window).scrollTop()); // get actual scrollpos
$('body').addClass('locked'); // add class to body
$('.wrapper').scrollTop( $('body').attr( 'data-pos' ) ); // let wrapper scroll to scrollpos

// when popup close

$("body").removeClass('locked');
$( window ).scrollTop( $('body').attr( 'data-pos' ));

CSS:

body.locked {position:relative;overflow:hidden;height:100%;}
body.locked .wrapper {position:relative;overflow:hidden;height:100%;}

It works well on both sides ... desktop & mobile (iOS).

Upvotes: 2

Eduardo Leite
Eduardo Leite

Reputation: 472

After many days trying, I found this solution that worked for me:

touch-action: none;
-ms-touch-action: none;

MDN touch-action docs

Upvotes: 46

Ivan_Aka
Ivan_Aka

Reputation: 63

If you need scroll modal

Modal open

$('body').attr('data-position', $(window).scrollTop());
$('body').css({'overflow' : 'hidden', 'position' : 'fixed'});

Modal close

$('body').css({'overflow' : 'unset', 'position' : 'unset'});
$(window).scrollTop( $('body').attr( 'data-position' ));

Upvotes: 1

Vahe Nikoghosyan
Vahe Nikoghosyan

Reputation: 469

A CSS keyword value that resets a property's value to the default specified by the browser in its UA stylesheet, as if the webpage had not included any CSS. For example, display:revert on a <div> would result in display:block.

overflow: revert;

I think this will work properly

Upvotes: 0

Arie S.
Arie S.

Reputation: 1

Here is what I did: I check the body y position , then make the body fixed and adjust the top to the negative of that position. On reverse, I make the body static and set the scroll to the value I recorded before.

var body_x_position = 0;

function disable_bk_scrl(){

    var elb = document.querySelector('body');

    body_x_position = elb.scrollTop;
    // get scroll position in px

    var body_x_position_m = body_x_position*(-1);
    console.log(body_x_position);

    document.body.style.position = "fixed";

    $('body').css({ top: body_x_position_m });

}

function enable_bk_scrl(){  

    document.body.style.position = "static";

    document.body.scrollTo(0, body_x_position);

    console.log(body_x_position);
}

Upvotes: 0

Loosie94
Loosie94

Reputation: 665

For me this:

height: 100%; 
overflow: hidden; 
width: 100%; 
position: fixed;

Wasn't enough, i't didn't work on iOS on Safari. I also had to add:

top: 0;
left: 0;
right: 0;
bottom: 0;

To make it work good. Works fine now :)

Upvotes: 5

laFunk
laFunk

Reputation: 1005

body {
  position:relative; // that's it
  overflow:hidden;
}

Upvotes: 98

kristian lepi
kristian lepi

Reputation: 17

Simply change body height < 300px (height of mobile viewport on landspace is around 300px to 500px)

JS

$( '.offcanvas-toggle' ).on( 'click', function() {
    $( 'body' ).toggleClass( 'offcanvas-expanded' );
});

CSS

.offcanvas-expended { /* this is class added to body on click */
    height: 200px;
}
.offcanvas {
    height: 100%;
}

Upvotes: -6

Sridhar
Sridhar

Reputation: 421

Its working in Safari browser.

html,
body {
  overflow: hidden;
  position: fixed
}

Upvotes: 6

Longwinter
Longwinter

Reputation: 11

html {
  position:relative;
  top:0px;
  left:0px;
  overflow:auto;
  height:auto
}

add this as default to your css

.class-on-html{
  position:fixed;
  top:0px;
  left:0px;
  overflow:hidden;
  height:100%;
}

toggleClass this class to to cut page

when you turn off this class first line will call scrolling bar back

Upvotes: 1

Davey
Davey

Reputation: 2514

Some solutions listed here had some strange glitches when stretching the elastic scrolling. To fix that I used: 

body.lock-position {
  height: 100%;
  overflow: hidden;
  width: 100%;
  position: fixed;
}

Source: http://www.teamtownend.com/2013/07/ios-prevent-scrolling-on-body/

Upvotes: 34

S16
S16

Reputation: 2995

Why not wrap the content you don't want shown in an element with a class and set that class to display:none in a stylesheet meant only for the iphone and other handheld devices?

<!--[if !IE]>-->
<link media="only screen and (max-device-width: 480px)" href="small-device.css" type= "text/css" rel="stylesheet">
<!--<![endif]-->

Upvotes: 0

Alex Haas
Alex Haas

Reputation: 2147

I had a similar issue and found that applying overflow: hidden; to both html and body solved my problem.

html,
body {
    overflow: hidden;
}

For iOS 9, you may need to use this instead: (Thanks chaenu!)

html,
body {
    overflow: hidden;
    position: relative;
    height: 100%;
}

Upvotes: 141

chaenu
chaenu

Reputation: 2025

Had this issue today on iOS 8 & 9 and it seems that we now need to add height: 100%;

So add

html,
body {
  position: relative;
  height: 100%;
  overflow: hidden;
}

Upvotes: 12

Devraj Gadhavi
Devraj Gadhavi

Reputation: 3611

Combining the answers and comments here and this similar question here worked for me.

So posting as a whole answer.

Here's how you need to put a wrapper div around your site content, just inside the <body> tag.

 <!DOCTYPE HTML>
 <html>
 <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <!-- other meta and head stuff here -->
 <head>
 <body>
     <div class="wrapper">
         <!-- Your site content here -->
     </div>
 </body>
 </html>

Create the wrapper class as below.

.wrapper{
    position:relative; //that's it
    overflow:hidden;
}

I also got the idea from this answer here.

And this answer here also has got some food for thought. Something that probably will work equally good in both desktops and devices.

Upvotes: 4

adam
adam

Reputation: 1087

It does apply, but it only applies to certain elements within the DOM. for example, it won't work on a table, td, or some other elements, but it will work on a <DIV> tag.
eg:

<body>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>

Only tested in iOS 4.3.

A minor edit: you may be better off using overflow:scroll so two finger-scrolling does work.

Upvotes: 0

Related Questions