Question

我正在创建一个响应式网站，其中“画布外”菜单的分辨率低于640像素。我通过将两个类中的一个应用于外部容器div来使菜单可访问，这两个类都使用css动画，使用translateX向左或向右滑动所有内容。这在Chrome和Safari中完美运行（尚未测试IE），但是Firefox添加了一个水平滚动，使我能够从菜单滚动到应该被推送的内容，但是10％，从屏幕到正确的。将overflow-x: hidden或overflow: hidden应用于父div似乎是逻辑解决方案，但这会使我的画布菜单不可见。有人知道修复吗？

我拥有大部分代码的

Here is a Fiddle。为了让它在jsFiddle上工作，我不得不稍微调整一下，所以第一次点击粉红色框是错误的，但之后就可以了。但是，在小提琴中，问题出现在每个浏览器上，甚至是Chrome和Safari。这不会发生在jsFiddle之外。

对于那些想要检查所有代码的人。它列在下面：

HTML＆amp; JQUERY

<!DOCTYPE html>
<html>
    <head>
        <title>Off canvas menu</title>
        <link rel="stylesheet" href="offcanvas.css" />
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width">
    </head>
    <body class="loading">
        <div class="wrapper">
            <div class="inner-wrapper">

                <header>
                    <div class="topheader">
                        <div class="menu-icon"></div><!-- /.menu-icon -->
                    </div><!-- /.topheader -->

                    <nav>Link</nav>

                    <div class="search"></div><!-- /.search -->
                </header>

                <div class="content" role="main">
                    <div class="banner"></div><!-- /.banner -->

                    <div class="left"></div><!-- /.left -->

                    <div class="center"></div><!-- /.center -->

                    <div class="right"></div><!-- /.right -->
                </div><!-- /.content -->

            </div><!-- /.inner-wrapper -->
        </div><!-- /.wrapper -->
    </body>
    <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script>
        $('.menu-icon').click(function() {
            if($('body').hasClass('loading')) {
                $('body').removeClass('loading');
                $('body').addClass('slideOpen');
            } else if($('body').hasClass('slideClosed')) {
                $('body').removeClass('slideClosed');
                $('body').addClass('slideOpen');
            } else {
                $('body').removeClass('slideOpen');
                $('body').addClass('slideClosed');
            }
        });
    </script>
</html>

CSS

* {
    border-box: box-sizing;
}
html, body {
    margin: 0;
    /*overflow-x: hidden;*/
    padding: 0;
}
.inner-wrapper {
    /*overflow-x: hidden;*/
    position: relative;
}
header {
    width: 100%;
}
.topheader {
    background: #fff;
    height: 30px;
    width: 100%;
}
header .menu-icon {
    background: #e41e7b;
    display: none;
    height: 30px;
    width: 30px;
}
nav {
    background: #404040;
    height: 65px;
    width: 100%;
}
.search {
    background: #dbdbdb;
    height: 45px;
    width: 100%;
}
.content {
    background: silver;
    height: 1500px;
    position: relative;
    width: 100%;
}
.banner {
    background: url('http://placekitten.com/1000/300');
    background-size: cover;
    background-position: center;
    height: 300px;
    left: 20%;
    position: absolute;
    width: 60%;
}
.left {
    background: burlywood;
    height: 1500px;
    left: 0px;
    position: absolute;
    width: 20%;
}
.right {
    background: chocolate;
    height: 1500px;
    left: 80%;
    position: absolute;
    width: 20%;
}
.center {
    background: antiquewhite;
    height: 1200px;
    left: 20%;
    position: absolute;
    top: 300px;
    width: 60%;
}
@media only screen and (max-width: 1300px) {
    .banner {
        width: 80%;
    }
    .right {
        height: 1200px;
        top: 300px;
    }
}
@media only screen and (max-width: 1100px) {
    .banner {
        left: 0;
        width: 100%;
    }
    .left {
        height: 1200px;
        top: 300px;
    }
}
@media only screen and (max-width: 1024px) {
    .left {
        width: 30%;
    }
    .center {
        left: 30%;
        width: 70%;
    }
    .right {
        height: 500px;
        left: 0;
        top: 1500px;
        width: 100%;
    }
}
@media only screen and (max-width: 640px) {
    header .menu-icon {
        display: block;
    }
    nav {
        height: 1500px;
        left: -90%;
        position: absolute;
        top: 0;
        width: 90%;
        z-index: 999;
    }
    .left {
        display: none;
    }
    .center {
        left: 0;
        width: 100%;
    }
}
@keyframes slideOpen {
    from { transform: translateX(0); }
    to { transform: translateX(90%); }
}
@-webkit-keyframes slideOpen {
    from { -webkit-transform: translateX(0); }
    to { -webkit-transform: translateX(90%); }
}
@keyframes slideClosed {
    from { transform: translateX(90%); }
    to { tranform: translateX(0); }
}
@-webkit-keyframes slideClosed {
    from { -webkit-transform: translateX(90%); }
    to { -webkit-tranform: translateX(0); }
}
.slideOpen {
    animation: slideOpen .3s ease;
    animation-fill-mode: forwards;
    -webkit-animation: slideOpen .3s ease;
    -webkit-animation-fill-mode: forwards;
}
.slideClosed {
    animation: slideClosed .3s ease;
    animation-fill-mode: forwards;
    -webkit-animation: slideClosed .3s ease;
    -webkit-animation-fill-mode: forwards;
}

Answer 1

尝试滑动包装器而不是正文：http://jsfiddle.net/3Yjaz/1/

if($('.wrapper').hasClass('slideClosed')) {
  $('.wrapper').removeClass('slideClosed');
  $('.wrapper').addClass('slideOpen');
} else {
  $('.wrapper').removeClass('slideOpen');
  $('.wrapper').addClass('slideClosed');
}

CSS：

   html, body {
        margin: 0;
        overflow-x: hidden;
        padding: 0;
    }

仍然能够在Firefox中使用offcanvas菜单进行水平滚动

1 个答案: