Question

目的是什么

我正在使用CSS和JavaScript off canvas menu。画布外菜单按预期工作。我想要一个侧边栏菜单，它位于屏幕左侧，并在触发菜单时移动。我们的想法是拥有一个100px的菜单触发器，其高度为100％，并且始终位于屏幕左侧。使用绝对位置我在所有浏览器上都有高度问题，使用固定位置Firefox工作正常，但遇到下面提到的问题。

错误

Firefox问题：没有，据我所知。

Chrome问题：向下滚动几个像素后，侧边栏菜单触发器不会拉伸整个页面。

Internet Explorer：当触发侧边栏菜单时，侧边栏似乎完全消失。

的jsfiddle

因为我的代码在HTML，CSS和JavaScript上都很重要，所以我添加了jsFiddle。请注意，就我所知，此问题仅发生在Chrome和Internet Explorer上。您可以通过向下滚动页面然后单击左侧菜单按钮来复制问题。

截图

Off Canvas Menu Issues

注意有价值的HTML代码（小提琴中的完整代码）

<div id="sbContainer" class="sbContainer">
    <div class="sbPush">
        <header class="contain-to-grid sbMenu sbFX">
            <nav class="top-bar" data-topbar>
                <ul class="title-area show-for-small-only"><!--SITENAME--></ul>
                <section class="top-bar-section"><!--LINKS--></section>
            </nav>
        </header>
        <div class="sbContent-one">
            <div class="sbContent-two">
                <div class="sbMenuTrigger" data-effect="sbFX"><!--SIDEBAR TRIGGER--></div>
                <div class="sbMainContent" role="document"><!--PAGE CONTENT--></div>
            </div>
        </div>
    </div>
</div>

注意有价值的CSS代码（小提琴中的完整代码）

html, body, .sbContainer, .sbPush, .sbContent-one {
    height:100%
}
.sbContent-one {
    overflow-x:hidden;
    background:#fff;
    position:relative
}
.sbContainer {
    position:relative;
    overflow:hidden
}
.sbPush {
    position:relative;
    left:0;
    z-index:99;
    height:100%;
    -webkit-transition:-webkit-transform .5s;
    transition:transform .5s
}
.sbPush::after {
    position:absolute;
    top:0;
    right:0;
    width:0;
    height:0;
    background:rgba(0,0,0,0.2);
    content:'';
    opacity:0;
    -webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
    transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbMenu-open .sbPush::after {
    width:100%;
    height:100%;
    opacity:1;
    -webkit-transition:opacity .5s;
    transition:opacity .5s
}
.sbMenu {
    position:absolute;
    top:0;
    left:0;
    z-index:100;
    visibility:hidden;
    width:244px;
    height:100%;
    background:#872734;
    -webkit-transition:all .5s;
    transition:all .5s
}
.sbMenu::after {
    position:absolute;
    top:0;
    right:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.2);
    content:'';
    opacity:1;
    -webkit-transition:opacity .5s;
    transition:opacity .5s
}
.sbMenu-open .sbMenu::after {
    width:0;
    height:0;
    opacity:0;
    -webkit-transition:opacity 0.5s,width .1s 0.5s,height .1s .5s;
    transition:opacity 0.5s,width .1s 0.5s,height .1s .5s
}
.sbFX.sbMenu-open .sbPush {
    -webkit-transform:translate3d(300px,0,0);
    transform:translate3d(244px,0,0)
}
.sbFX.sbMenu {
    -webkit-transform:translate3d(-100%,0,0);
    transform:translate3d(-100%,0,0)
}
.sbFX.sbMenu-open .sbFX.sbMenu {
    visibility:visible;
    -webkit-transition:-webkit-transform .5s;
    transition:transform .5s
}
.sbFX.sbMenu::after {
    display:none
}
.no-csstransforms3d .sbPush,.no-js .sbPush {
    padding-left:244px
}
.sbMenuTrigger {
    background-color:#b23445;
    cursor:pointer;
    height:100%;
    width:100px;
    position:fixed;
    left:0;
    top:0
}
.sbMainContent {
    margin-left:100px;
    width:calc(100% - 100px);
    top:0;
    padding-top:50px;
    position:absolute;
    height:100%
}

Answer 1

这是一种需要很少更改的解决方法。

它在最新版本的FF，Chrome和IE11 / 10中保持一致。

Updated Example

.sbContent-one {
  overflow: visible;       /* Or remove overflow-x: hidden */
}
.sbMainContent {
  overflow-x: hidden;
}
.sbMenuTrigger {
  position: static;        /* Or remove position: fixed */
}

在Chrome中解决问题的最简单方法是将overflow从.sbContent-one移至.sbMainContent。这样做，您实际上无法滚动.sbMenuTrigger元素（解决问题），因为.sbMainContent是兄弟元素。

浏览器目前many inconsistencies围绕fixed元素的positioned relative to elements transformed using translate3d {{3}}。 IE中的问题是由于fixed元素相对于窗口定位而不考虑使用translate3d转换的元素。要解决此问题，请完全避免固定定位，并通过删除.sbMenuTrigger（或使用position: fixed覆盖默认值）将元素position: static添加回正常流程中。在这样做时，侧边栏按预期扩展。

换句话说：

从overflow-x: hidden移除.sbContent-one（或使用overflow: visible覆盖它）。
将overflow-x: hidden添加到.sbMainContent。
从position: fixed移除.sbMenuTrigger（或使用position: static覆盖它）。

Answer 2

这是我解决您问题的方法。在3个市长的浏览器上测试过，它运行正常！

see fiddle

看看我对以下课程的更改：

从.sbContent-one
将高度：100％添加到.sbContent-two（新规则）
对.sbMainContent
.sbMenuTrigger

主要问题是：

来自.sbContent-one和.sbMainContent的不必要的位置相对位置和绝对位置。
固定的位置是相对于窗口的，因此在翻译元素时，浏览器的行为会有所不同。

Answer 3

我设法让它在最后的chrome / IE11上工作。

jsfiddle

我移动了

 echo "uploaded image is :"; ?>
<img src="imageView.php?image_id=<?php echo $lastid; ?>" /><br/>
<?php

在<div class="sbMenuTrigger" data-effect="sbFX"> <div class="sbMenuIcon"> <div class="sbMenuIconBackground"></div> <div class="sbMenuIconOverlay"></div> </div> <div class="sbMenuLogo"> <div class="sbMenuLogoBackground"></div> <div class="sbMenuLogoOverlay"></div> </div> </div>标记的末尾，CSS变为：

<header>

所有浏览器并不总是欢迎固定+变换位置。

位置：修复了在Chrome和IE中关闭画布菜单时不能很好玩

3 个答案: