Question

我正在尝试使用转换创建一个带滑动过渡的移动幻灯片菜单。

菜单需要垂直滚动，填充设备的整个宽度和高度，但也阻止滚动下面的主文档。

我在阻止滚动主文档时遇到问题，同时保持过渡效果。

样本：

http://jsfiddle.net/e54nj/5/embedded/result/

http://fiddle.jshell.net/e54nj/5/show/light/

JS：

$('.btn-contacts').on('click', function() {
    if ($('#mobile-contacts').hasClass('open')) {
        $('#mobile-contacts').removeClass('open');
        $('body').removeClass('noscroll');
    } else {
        $('#mobile-contacts').addClass('open');
        $('body').addClass('noscroll');
    }
});

CSS：

body.noscroll{overflow:hidden;width:100%;}
#header-bar{position:fixed;top:0px;left:0;width:100%;height:46px;background-color:#8ba6bc;z-index:998;}
#header-bar .btn-add-event{margin:6px 0;}
#header-bar .btn-contacts{float:right;color:#fff;font-size:22px;line-height:46px;padding:0 15px;cursor:pointer;}
#mobile-contacts{background-color:#8ba6bc;position:fixed;top:46px;bottom:0;left:0;right:0;z-index:999;}
#mobile-contacts{-webkit-transition:-webkit-transform 200ms linear;transition:transform 200ms linear;-webkit-transform: translateX(100%);-ms-transform:translateX(100%);transform: translateX(100%);}
#mobile-contacts.open{-webkit-transform: translateX(0%);-ms-transform:translateX(0%);transform: translateX(0%);}

如果我没有将noscroll类添加到正文中，则转换工作正常。

可滚动滑出菜单

0 个答案: