我正在为小于 640 像素的分辨率创建一个带有“非 Canvas ”菜单的响应式网站。我通过将两个类之一应用到外部容器 div 来使菜单可访问，这两个类都带有 css 动画，这些动画使用 translateX 向左或向右滑动所有内容。这在 Chrome 和 Safari 中完美运行(尚未测试 IE)，但 Firefox 添加了一个水平滚动条，使我能够从菜单滚动到应该推送的内容，但是 10%，超出屏幕正确的。
将 overflow-x: hidden 或只是 overflow: hidden 应用于父 div 似乎是合乎逻辑的解决方案，但这会使我的 Canvas 外菜单不可见。有人知道解决办法吗？
Here is a Fiddle那有我的大部分代码。为了让它在 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;
}
最佳答案
尝试滑动包装而不是主体: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;
}
关于javascript - 仍然可以在 Firefox 中使用 offcanvas 菜单水平滚动，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20659793/