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/

看起来问题是html，body上的height: 100%。如果没有这个，我怎么能让我的页面全屏显示，但仍然可以平滑滚动？

Answer 1

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

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

使用flexbox时平滑滚动

1 个答案: