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
Raptor 12 marzec 2020, 13:09

2 odpowiedzi

Najlepsza odpowiedź

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

2
Zim 16 marzec 2020, 13:26

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.

0
Leon Vuković 12 marzec 2020, 12:53