使用 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 的同时使用它？

更新：添加 fiddle、http://jsfiddle.net/sLe2699u/3/

问题似乎出在 html 主体上的 height: 100%。如果没有这个，我如何让我的页面全屏显示，但仍然有平滑的滚动？

Answer 1

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

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

使用 flexbox 时平滑滚动

smooth scroll when using flexbox

html

javascript

jquery

smooth-scrolling

flexbox