glatte Scroll wenn Flexbox mit

Question

Ich habe eine Seite, die der primäre Inhalt display: flex Verwendung

.outer-wrap .inner-wrap { 
    display: flex; 
    display: -webkit-flex; 
    display: -ms-flex; 
    display: -ms-flexbox; 
    margin-left: -280px; 
    transition: all 0.5s ease; 
    height: 100%; 
} 

Das Problem ist, dass alle von der smooth scrolling JS/JQuery Ich habe versucht, nicht reibungslos bewegen.

Die JS I ist,

var $root = $('html, body'); 

$('.sideNav-link').click(function() { 
    var href = $.attr(this, 'href'); 
    $root.animate({ 
     scrollTop: $(href).offset().top 
    }, 500, function() { 
     window.location.hash = href; 
    }); 
    return false; 
}); 

Wie kann ich diese zu nutzen versuche verwenden, wenn auch display: flex verwenden?

UPDATE: Hinzufügen Geige, http://jsfiddle.net/sLe2699u/3/

Es sieht aus wie das Problem der height: 100% auf der html ist, Körper. Wie kann ich meine Seiten ohne diesen Bildschirm im Vollbildmodus haben, aber trotzdem reibungslos scrollen?

Answer 1

Das Problem ist, dass Sie versuchen, die html und body Elemente zu scrollen, aber diese sind nicht scrollbar, weil alles in ihnen passt. Das Element, das tatsächlich etwas versteckt, ist .main-content, also ist das das Element, das in diesem Fall zu scrollen ist.

$('a').click(function(){ 
    $('.main-content').animate({ 
     scrollTop: $($(this).attr('href')).offset().top 
    }, 500); 
    return false; 
});