javascript - Bootstrap : Prevent Scrolling in LG or larger, 启用 MD 或更小的滚动

Question

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

我想重新启用移动屏幕中的滚动(我对移动屏幕的定义是 MD 断点或更小)。我怎样才能以 Bootstrap 的方式做到这一点？我能想到的传统方法是在 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 演示:https://jsfiddle.net/shivanraptor/xdj1f35e/15/

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

Answer 1

我会在“页面”上使用 min-vh-100，而不是使用 h-100，然后您只需要对正文溢出(无需 JS):

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

https://codeply.com/p/dfIMHaQwV1