仍然能够使用Firefox中的offcanvas菜单水平滚动

Question

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

这是包含我大部分代码的小提琴。 为了使其能够在jsFiddle上运行，我必须对其进行一些调整，因此第一次单击粉红色框是错误的，但此后它仍然可以工作。 但是，在Fiddle中，问题出现在每个浏览器上，甚至包括Chrome和Safari。 这在jsFiddle之外不会发生。

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

HTML和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 个解决方案

解决方案1
0 已采纳 2013-12-18 14:14:45

仍然能够使用Firefox中的offcanvas菜单水平滚动

问题描述

1 个解决方案

解决方案1 0 已采纳 2013-12-18 14:14:45

解决方案1
0 已采纳 2013-12-18 14:14:45