Mam witrynę internetową, która korzysta z frameworka Bootstrap 4 (v4.4.1). Zastosowałem właściwości CSS height: 100% w HTML i body z overflow: hidden, aby wyłączyć przewijanie i sprawić, że zawartość jest ograniczona tylko w oknie przeglądarki (nie mam wielu treści). (Wiem, że mogę użyć klasy bootstrap CSS h-100.
Chciałbym ponownie włączyć przewijanie na ekranach mobilnych (moja definicja ekranu mobilnego to punkt przerwania MD lub mniejszy). Jak mogę to zrobić na sposób Bootstrap? Tradycyjną metodą, o której przychodzi mi do głowy, jest dynamiczne usuwanie height: 100% i overflow: hidden podczas onLoad(), a także podczas zmiany rozmiaru przeglądarki, ale wygląda na to, że nie jest to metoda Bootstrap.
Minimalne działające kody są pokazane poniżej:
HTML (tylko część treści)
<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 (właściwie niezupełnie powiązany, tylko do celów demonstracyjnych)
$(document).ready(function() {
$('#btn_page2').click(function() {
$('#page1').hide();
$('#page2').show();
$('#page3').hide();
});
$('#btn_page3').click(function() {
$('#page1').hide();
$('#page2').hide();
$('#page3').show();
});
});
Demo JSFiddle: https://jsfiddle.net/shivanraptor/xdj1f35e/15/
Efekty, które chciałbym uzyskać, to wyświetlenie strony 1, 2 i 3 od góry do dołu i przewijanie jak długa witryna na ekranie z punktami przerwania MD lub poniżej.
2 odpowiedzi
Zamiast używać h-100 użyłbym min-vh-100 na „stronach”, a wtedy wystarczyło zapytanie @media dla przepełnienia treści (nie jest potrzebny JS):
@media (min-width: 576px) {
body {
overflow: hidden;
}
}
https://codeply.com/p/dfIMHaQwV1
Możesz zrobić coś takiego:
$(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();
});
}
});
I CSS:
@media (max-width: 767.98px) {
html, body {
height: 100%;
overflow: initial;
}
}
@media (min-width: 768px) {
html, body {
overflow: hidden;
}
}
Pamiętaj, że rozmiar MD jest przeznaczony dla tabletów (768px) i poniżej zgodnie z dokumentacją Bootstrap.