Bootstrap 3: il contenuto di Navbar aperto non può scorrere sul cellulare

Question

Ho bisogno di lavorare con la navbar di Bootstrap 3, ma sembra essere un piccolo buggy.Sulla mia Lumia 820 ho controllato la navigazione predefinita ma non riesco a scorrere il contenuto del menu all'interno della navbar.Invece del menu posso scorrere il corpo dietro il menu. Su Desktop posso scorrere bene il contenuto del menu con overflow: Auto CSS ma sul mio cellulare non riesco a scorrere né auto né nascosto .. Qualche idea?

Immagine qui: http://i.stack.imgur.com/8lxxj.png.itA>

Answer 1

Possibilmente stai descrivendo Apri il problema # 12738 "Impossibile scorrere fino all'ultima voce di navigazione crollataMobile quando ci sono molti articoli "?

Answer 2

Vorrei Aggiungi alcune correzioni alla soluzione giusta.Soprattutto a Correzione Animazione del collasso :

.navbar-nav {
  height: 100vh; // <-- This will fix the collapse animation
}

.navbar-collapse.in {     
   overflow-x: hidden;
   padding-right: 17px; // <-- Hide scroll bar, but still being able to scroll
}

@media (min-width: 768px) {
    .navbar-nav {
        height: auto;
    }
}

.

Answer 3

Puoi sistemarlo solo usando il codice jQuery sotto:

$ (". navbar-crollasso"). css ({maxheight: $ (finestra) .Height () - $ (". navbar-header"). altezza () + px "});

Answer 4

Sebbene il problema sia già piuttosto vecchio, voglio dare la mia soluzione o una migliore soluzione al lavoro al problema, forse aiuta qualcuno.

Ho avuto lo stesso problema di WebProgramozoo per il mio sito web reattivo sul browser Safari sul mio iPhone 4S: non riesco a scorrere verso il basso nei punti dei menu alla fine del menu.Invece vedo il corpo dietro il menu a scorrimento.Per evitare questa situazione ho avuto l'idea di nascondere il corpo dietro il menu mentre è aperto.Questa non è una soluzione, ma una buona soluzione che funziona per me.

/**
 * Bootstrap menu scroll-problem fix:
 * Makes the content below the menu invisible while the menu is open.
 *
 */
$(document).ready(function() {
    $('.navbar-toggle').click(function () {

        var expanded = $('.navbar-toggle').attr('aria-expanded');

        if (expanded == 'false') {
            $('.main-container').hide();
        } else {
            $('.main-container').show();
        }
    });
});

.