I have a website that utilizes the Bootstrap 4 framework (v4.4.1). I implemented CSS properties height: 100% in HTML and body along with overflow: hidden to restrict scrolling and keep the content within the browser window only (I don't have much content). (I am aware of using the h-100 Bootstrap CSS class).
Now, I want to allow scrolling on mobile screens (considered as MD breakpoint or smaller). How can I achieve this in a Bootstrap-friendly manner? One traditional approach could be to dynamically remove height: 100% and overflow: hidden during onLoad() events and when the browser is being resized, but it may not align with the Bootstrap methodology.
The following are the basic code snippets:
HTML section (only 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 styles
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;
}
Javascript to demonstrate functionality (not directly related)
$(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/
I aim to enable the effect where Page 1, 2, and 3 are displayed one after another vertically and scroll seamlessly like an extended webpage on screens at MD breakpoints or smaller sizes.