Bootstrap 3: El contenido de NAVBAR abierto no se puede desplazarse en el móvil

Question

Necesito trabajar con el NAVBAR de Bootstrap 3, pero parece ser un poco de buggy.En mi Lumia 820, verifiqué la barra de navegación predeterminada, pero no puedo desplazar el contenido del menú dentro de la barra de navegación.En lugar del menú puedo desplazar el cuerpo detrás del menú. En el escritorio, puedo desplazar el contenido del menú bien con el desbordamiento: Auto CSS, pero en mi móvil no puedo desplazarse ni auto ni ocultar. ¿Alguna idea?

Imagen aquí: http://i.stack.imgur.com/8lxxj.png

Answer 1

Posiblemente estás describiendo Abrir problema # 12738 "No se puede desplácese hasta el último elemento de NavBar colapsado enMóvil cuando hay muchos artículos "?

Answer 2

Me gustaría agregar algunas correcciones a la solución correcta.Especialmente a arreglar la animación de colapso :

.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

Puede arreglarlo solo usando el código de jQuery debajo:

$ (". NavBAR-COLSULTE"). CSS ({MAXHEIGHT: $ (ventana) .Height () - $ ("NAVBAR-encabezado"). Altura () + "px"});

Answer 4

Aunque el problema ya es bastante viejo, quiero dar mi solución o mejorar la solución al problema, tal vez ayude a alguien.

Tuve el mismo problema que WEBPROGRAMRAZO PARA MI SITIO WEB DESCRIPCIÓN EN EL BRADERA DE SAFARI EN MI IPHONE 4S: No puedo desplácese hasta los puntos de menú al final del menú.En su lugar, veo el cuerpo detrás del menú de desplazamiento.Para evitar esta situación, tuve la idea de ocultar el cuerpo detrás del menú mientras está abierto.Esto no es una solución, sino una buena solución que funciona para mí.

/**
 * 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();
        }
    });
});