Prevent body from scrolling (mobile, native browsers)

Question

On native browser of Samsung Galaxy S5 / S6, following piece of CSS:

body {
  overflow: hidden;
}

doesn't stop the body from scrolling.

Is there a workaround for this?

Edit: as discussed below, this can be done by adding overflow:hidden to html tag as well. But this introduces an issue where window scrolls to top.

Is it possible to prevent body from scrolling without the scroll side effect (page scrolling to top once html, body get overflow:hidden)?

Side note: issue is reproducible in following environments:

Samsung Galaxy S5 (Android 5.0) Browser: Native;
Samsung Galaxy S6 (Android 6.0.1) Browser: Native;
iPhone 5S (iOS 8.4.1) Browsers: Chrome; Safari;
iPhone 6+ (iOS 9.3.2) Browsers: Chrome; Safari;

DrEarnest · Accepted Answer

try

body {
    overflow:hidden;
    position:fixed;
    top:0;
    bottom: 0;
}

David Antoon · Answer

Css + Javascript solution:

css class to disable scrolling

.lock-scroll{
    position: fixed;
    width: 100%;
    height: 100%;
}

javascript code to fix the scrollTop jump after applying the css class:

function disableScroll(elem){
    var lastScrollTop = $(elem).scrollTop();
    $(elem).addClass("lock-scroll");
    $(elem).css("top", "-" + lastScrollTop + "px");
}

function enableScroll(elem){
    var lastScrollTop = Number($('#wmd-input-39380954').css("top").match(/[0-9]/g).join(""));
    $(elem).removeClass("lock-scroll");
    $(elem).css("top", "0px");
    $(elem).scrollTop(lastScrollTop);
}

Disable scroll by target element

index.html:

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
        </script>
        <style>
            body{
                  background-color:#333333;
                  color: white;
              }
              #modalView{
                  position: fixed;
                  width: 100%;
                  height: 100%;
                  left: 0;
                  top: 0;
                  background: rgba(0,0,0,0.6);
                  overflow: scroll;
              }
              #modalViewScroll{
                width: 300px;
                height: 200px;
                overflow: scroll;
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                top: 0;
                margin: auto;
                background: white;
                color: red;
              }
        </style>
    </head>
    <body>
        BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>BODY SCROLL 1<br/>_____________<br/>BODY SCROLL 2<br/>_____________<br/>BODY SCROLL 3<br/>_____________<br/>BODY SCROLL 4<br/>_____________<br/>BODY SCROLL 5<br/>_____________<br/>BODY SCROLL 6<br/>_____________<br/>BODY SCROLL 7<br/>_____________<br/>BODY SCROLL 8<br/>_____________<br/>BODY SCROLL 9<br/>_____________<br/>
        <div id="modalView">
            <div id="modalViewScroll">
                MODAALLLL SCROLL 1<br/>__________________<br/>MODAALLLL SCROLL 2<br/>__________________<br/>MODAALLLL SCROLL 3<br/>__________________<br/>MODAALLLL SCROLL 4<br/>__________________<br/>MODAALLLL SCROLL 5<br/>__________________<br/>MODAALLLL SCROLL 6<br/>__________________<br/>MODAALLLL SCROLL 7<br/>__________________<br/>MODAALLLL SCROLL 8<br/>__________________<br/>MODAALLLL SCROLL 9<br/>__________________<br/>MODAALLLL SCROLL 1<br/>__________________<br/>MODAALLLL SCROLL 2<br/>__________________<br/>MODAALLLL SCROLL 3<br/>__________________<br/>
            </div>
        </div>
        <script type="text/javascript">
            function scrollDisabled(e){
                    // Two option :
                    // 
                    // 1) scroll anywhere will scroll the modal but you have to handle scroll state, and disable scroll with close modal
                    // 
                    // if(scrollingModal){
                    //   $('#modalViewScroll').scrollTop($('#modalViewScroll').scrollTop() + e.deltaY);
                    //   return true;
                    // }

                    // 2) scroll only above the modal 
                    if (e.target.id == "modalViewScroll") {
                      $('#modalViewScroll').scrollTop($('#modalViewScroll').scrollTop() + e.deltaY);
                      return true;
                    }
                }

                function preventDefaultForScrollKeys(e) {
                  if(scrollDisabled(e)){
                    var keys = {37: 1, 38: 1, 39: 1, 40: 1};
                    if (keys[e.keyCode]) {
                        preventDefault(e);
                        return false;
                    }
                  }
                }

                function preventDefault(e) {
                  if(scrollDisabled(e)){
                    e = e || window.event;
                    if (e.preventDefault) e.preventDefault();
                    e.returnValue = false;
                  }
                }
                function hookScroll() {
                    if (window.addEventListener) // older FF
                        window.addEventListener('DOMMouseScroll', preventDefault, false);
                    window.onwheel = preventDefault; // modern standard
                    window.onmousewheel = document.onmousewheel = preventDefault; // older browsers, IE
                    window.ontouchmove = preventDefault; // mobile
                    document.onkeydown = preventDefaultForScrollKeys;
                }
                hookScroll();
        </script>
    </body>
</html>

To avoid scrolling to top with click event fires

You must add return false; after the click event;

Example:

<button onclick="openModal(); return false;">Open Modal</button>

To disable scroll in mobile browsers

You need to set overflow:hidden also for the <html> tag.

Example:

<html>
    <head>
        <style>
            html,body{overflow:hidden}
        </style>    
    </head>
    <body>
        // You html body
    </body>
</html>

Jishnu V S · Answer

I think you can simply do with this boostrap modal pop up , just copy paste with this to a html page

body {
	width:100%;
	height:1000px;
	float:left;
	margin:0;
}

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>disable body scroll</title>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->

</head>

<body>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        	<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
            Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum
            </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>


<script type='text/javascript' src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

</body>
</html>

Prevent body from scrolling (mobile, native browsers)

Tags:

javascript

html

jquery

android

css

Tool

3 Answers

DrEarnest

Css + Javascript solution:

Disable scroll by target element

To avoid scrolling to top with click event fires

Example:

To disable scroll in mobile browsers

Example:

David Antoon

Jishnu V S

Recent Activity

Donate For Us

Prevent body from scrolling (mobile, native browsers)

Tags:

javascript

html

jquery

android

css

Tool

3 Answers

DrEarnest

Css + Javascript solution:

Disable scroll by target element

To avoid scrolling to top with click event fires

Example:

To disable scroll in mobile browsers

Example:

David Antoon

Jishnu V S

Related questions

Recent Activity

Donate For Us