引导程序:在LG或更大版本中防止滚动，在MD或更小版本中启用滚动

Question

我有一个使用Bootstrap 4框架(v4.4.1(的网站。我在HTML和body中应用了CSS属性height: 100%和overflow: hidden来禁用滚动，并使内容仅在浏览器窗口中有边界(我没有太多内容(。(我知道我可以使用h-100引导CSS类。

我想重新启用移动屏幕中的滚动(我对移动屏幕的定义是MD断点或更小(。我怎么能用Bootstrap的方式做到这一点？我能想到的传统方法是在onLoad()期间以及浏览器调整大小时动态删除height: 100%和overflow: hidden，但这似乎不是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演示：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;
}
}

请注意，根据Bootstrap文档，MD尺寸适用于片剂(768px(及以下。