使用flexbox时平滑滚动

Question

我有一个页面的主要内容是使用display: flex ，

.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%;
}

问题是我尝试过的所有平滑滚动JS / JQuery都不平滑滚动。

我要使用的JS是

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;
});

在同时使用display: flex时如何使用呢？

更新 ：添加小提琴， http ： //jsfiddle.net/sLe2699u/3/

看来问题在于height: 100% html正文上为height: 100% 。 如果没有此功能，如何使我的页面全屏显示，但仍可以平滑滚动？

Answer 1

问题是您试图滚动html和body元素，但是这些元素不可滚动，因为所有内容都适合它们。 实际上隐藏某些.main-content的元素是.main-content ，因此在这种情况下就是要滚动的元素。

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