Bootstrap: Prevent Scrolling in LG or larger, Enable Scrolling in MD or smaller

user_188331 0
Viewed 372

I have a website that makes use of the Bootstrap 4 framework (v4.4.1). I applied CSS properties height: 100% in HTML and body with overflow: hidden to disable scrolling and makes the contents bounded in the browser window only (I don't have many contents). (I know I can use h-100 bootstrap CSS class.

I would like to re-enable scrolling in mobile screens (my definition of the mobile screen is MD breakpoint or smaller). How can I do so in Bootstrap's way? The traditional method I can think of is to remove the height: 100% and overflow: hidden dynamically during onLoad() as well as when the browser is resizing, but it seems it's not the Bootstrap way to do so.

The minimal working codes are shown below:

HTML (only the body part)

<div class="container-fluid h-100">
    <div class="row h-100 justify-content-center align-items-start">
        <div class="col-12 col-sm-8 h-100 bg-info text-center" id="page1">
            <p>
                Page 1<br />
                <span class="btn btn-success" id="btn_page2">To Page 2</span>
            </p>
        </div>
        <div class="col-12 col-sm-8 h-100 bg-warning" id="page2">
            <p>
                Page 2<br />
                <span class="btn btn-success" id="btn_page3">To Page 3</span>
            </p>
        </div>
        <div class="col-12 col-sm-8 h-100 bg-info" id="page3">
            <p>
                Page 3
            </p>
        </div>
    </div>
</div>

CSS

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

body {
    font-family: 'Bebas Neue', cursive;
    background-color: #000;
    color: #FFF;
    margin: 0;
    padding: 0;
}
#page2, #page3 {
    display: none;
}

JS (actually not quite related, just for demo purpose)

$(document).ready(function() {
    $('#btn_page2').click(function() {
        $('#page1').hide();
        $('#page2').show();
        $('#page3').hide();
    });
    $('#btn_page3').click(function() {
        $('#page1').hide();
        $('#page2').hide();
        $('#page3').show();
    });
});

JSFiddle demo: https://jsfiddle.net/shivanraptor/xdj1f35e/15/

The effects I would like to make are to display Page 1, 2 and 3 from top to bottom, and scroll like a long website in the screen with MD breakpoints or below.

twitter-bootstrap css html jquery javascript
2 Answers

Instead of using h-100 I would use min-vh-100 on the "pages", and then you only need to have a @media query for the body overflow (no JS needed):

@media (min-width: 576px) { 
  body {
      overflow: hidden;
  }
}

https://codeply.com/p/dfIMHaQwV1

user_1714560

You could do something like this:

$(window).on('load resize', function () {
    if ($(window).width() < 768) {
        $('#page1, #page2, #page3').show();
      $('.btn').hide();
    } else {
        $('.btn').show();
      $('#btn_page2').click(function() {
          $('#page1').hide();
          $('#page2').show();
          $('#page3').hide();          
      });
      $('#btn_page3').click(function() {
          $('#page1').hide();
          $('#page2').hide();
          $('#page3').show();
      });
    }
});

And CSS:

@media (max-width: 767.98px) { 
  html, body {
    height: 100%;
    overflow: initial;
  }
}

@media (min-width: 768px) { 
  html, body {
      overflow: hidden;
  }
}

Note that MD size is for tablets (768px) and bellow according to Bootstrap documentation.

user_106786610
Related