我有一个position:fixed
叠加层,我正在填充导航和内容,如此小提琴所示:https://jsfiddle.net/9871Lz1u/1/
我在固定位置div中使用flexbox来控制导航按钮的位置,并使用相对定位的div来容纳内容。使用Chrome,这完全符合预期。然而,使用Firefox / Safari(最新版本),我发现当将光标悬停在flexbox(红色和蓝色)区域上时,滚动被锁定。我必须将光标悬停在白色内容框上以“启用”滚动。
我想要Chrome的行为,无论光标在哪里都允许滚动,这是最终的一致行为。此外,如果可能的话,我希望解决方案是纯HTML / CSS。
我的系统:macOS版本10.13.2,Chrome版本63.0.3239.132,Firefox版本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>
答案 0 :(得分:2)
浏览器处理此问题的一般方法是,它们将滚动包含光标的元素。
即使是Chrome,您也可以在堆栈代码中看到(当不在&#34;扩展模式&#34;时),如果光标不是&n,它将滚动整个stackoverflow页面如果你开始滚动红色或蓝色元素,那么#t; t over可滚动文本和小提琴。
但是,如果您第一次滚动文本,Chrome会继续滚动它,即使将光标移动到红色或蓝色元素之后,我的猜测是它会记住最后一次滚动,保持它是 >滚动焦点,直到另一个元素获得焦点。
因此,使用现有的标记,您将需要一个脚本来完成它,这里有一个示例,使用jQuery:
通过更改标记,只需删除container
即可完成脚本需求。
这对布局没有影响,因为body
或多或少具有与固定container
完全相同的行为,因此它将是body
将滚动,这将跨浏览器工作。
Stack snippet
body {
background: black;
margin: 0;
}
.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;
}
&#13;
<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>
&#13;