Javascript 引导：防止在LG或更大屏幕上滚动，启用MD或更小屏幕上的滚动

我有一个使用Bootstrap4框架（v4.4.1）的网站。我在

HTML

和

body

中应用了CSS属性

height:100%

，并使用

overflow:hidden

禁用滚动，使内容仅限于浏览器窗口（我没有很多内容）。（我知道我可以使用

h-100

bootstrap CSS类

我想重新启用移动屏幕中的滚动（我对移动屏幕的定义是MD断点或更小）。如何以引导的方式实现这一点？我能想到的传统方法是在

onLoad（）期间动态删除
height:100%
和
overflow:hidden
）

以及调整浏览器大小时，但这似乎不是引导方式

最低工作代码如下所示：

HTML（仅身体部位）

JS（实际上不太相关，只是为了演示）

JSFIDLE演示：

---

我想做的效果是从上到下显示第1、2和3页，并在屏幕上像一个长网站一样滚动，带有MD断点或以下位置。

而不是使用

h-100

我会在“页面”上使用

min-vh-100

，然后你只需要对身体溢出进行@media查询（无需JS）：

---

您可以这样做：

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

请注意，MD尺寸适用于片剂（768px）和波纹管以下的片剂

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;
}

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

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

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

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

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