Bootstrap: предотвращение прокрутки в LG или больше, включение прокрутки в MD или меньше

Question

У меня есть веб-сайт, который использует фреймворк Bootstrap 4 (v4.4.1). Я применил CSS свойства height: 100% в HTML и body с overflow: hidden, чтобы отключить прокрутку и ограничил содержимое только в окне браузера (у меня не так много содержимого). (Я знаю, что могу использовать класс h-100 bootstrap CSS.

Я хотел бы снова включить прокрутку на экранах мобильных устройств (мое определение экрана мобильного устройства - точка останова MD или меньше). Как можно Я делаю это способом Bootstrap. Традиционный метод, который я могу придумать, заключается в динамическом удалении height: 100% и overflow: hidden во время onLoad(), а также при изменении размера браузера, но, похоже, это не Bootstrap способ сделать это.

Ниже указаны минимальные рабочие коды:

HTML (только часть тела)

<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 (на самом деле не совсем связано, только для демонстрации)

$(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/

Эффекты, которые я хотел бы сделать, - это отображение страниц 1, 2 и 3 сверху вниз и прокрутка, как длинный веб-сайт на экране с точками останова MD или ниже.

Answer 1

Вместо использования h-100 я бы использовал min-vh-100 на "страницах", и тогда вам нужен только запрос @media для переполнения тела (не требуется JS):

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

https://codeply.com/p/dfIMHaQwV1

Answer 2

Вы можете сделать что-то вроде этого:

$(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();
      });
    }
});

И CSS:

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

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

Обратите внимание, что размер MD предназначен для планшетов (768 пикселей) и ниже согласно Bootstrap документация .