我有一个固定的覆盖层,在里面填充了导航和内容,如在此例中所示: https://jsfiddle.net/9871Lz1u/1/
我在一个固定位置的div中使用flexbox来控制导航按钮的位置,并使用相对定位的div来容纳内容。在Chrome中,这正是我想要的效果。然而,在Firefox / Safari(最新版本)中,当将光标悬停在flexbox(红色和蓝色)区域时,滚动被锁定。我必须将光标悬停在白色内容框上才能“启用”滚动。
我希望Chrome的行为成为最终一致的行为,无论光标在哪里都可以滚动。如果可能的话,我希望解决方案只使用纯HTML / CSS。
我的系统:macOS Version 10.13.2,Chrome Version 63.0.3239.132,Firefox Version 58.0
我希望Chrome的行为成为最终一致的行为,无论光标在哪里都可以滚动。如果可能的话,我希望解决方案只使用纯HTML / CSS。
我的系统:macOS Version 10.13.2,Chrome Version 63.0.3239.132,Firefox Version 58.0
.container {
background: black;
display: block;
position: fixed;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
overflow: auto;
}
.content {
background: white;
margin: auto;
max-width: 400px;
padding: 15px;
z-index: 2;
position: relative;
overflow: auto;
}
.nav-outer {
position:fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1;
}
.nav-inner {
display: flex;
width: 100%;
height: 100%;
flex-direction: row;
flex-wrap: nowrap;
}
.nav-center {
flex: 1 100%;
order: 2;
max-width: 400px;
}
.nav-container {
flex: 1 auto;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
/* -ms-flex-align: center;
-webkit-align-items: center;
-webkit-box-align: center; */
align-items: center;
overflow: hidden;
}
.nav-left {
order: 1;
background: red;
}
.nav-right {
order: 3;
background: blue;
}
.nav-button {
width: 70px;
height: 70px;
border-radius: 50%;
background-color: black;
display: block;
z-index: 10;
margin: auto;
background-repeat: no-repeat;
background-size: 40px 40px;
border: 1px solid white;
}
<div class="container">
<div class="content">
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
Some overflowable content<br/>
</div>
<div class="nav-outer">
<div class="nav-inner">
<div class="nav-container nav-left">
<div class="nav-button"></div>
</div>
<div class="nav-center"></div>
<div class="nav-container nav-right">
<div class="nav-button"></div>
</div>
</div>
</div>
</div>