overflow:auto
的元素中,Safari存在一个已知问题,即position:sticky
无法工作:
当父元素设置overflow为auto时,会防止Safari中的position: sticky生效。
然而,这正是我所需要的。我有一个可滚动的
position:sticky
的原因是我想让用户在光标位于右侧列时仍然能够滚动左侧列。而这是我找到的唯一解决方案。
Firefox/Chrome的实际例子在这里: http://cssdeck.com/labs/zfiuz4pc 橙色区域在滚动时保持固定,但在Safari中不起作用。
上面的示例对我的问题有些不必要的封装,但我希望尽可能地复制我需要它正常工作的环境。基本要点是我有这样一个结构:
<div class="modal-content">
<div class="left-content">
</div>
<div class="sticky-element">
</div>
</div>
而CSS为:
.modal-content {
display: flex;
overflow: auto;
flex-flow: row nowrap;
}
.left-content {
flex: 0 0 300px;
}
.sticky-element {
position: sticky;
top: 0;
right: 0;
width: 200px;
}
再次说明,在Firefox / Chrome中可以正常工作,但在Safari中无法正常工作。是否有解决方法可以使它在所有浏览器中都能正常工作?或者我可以使用不同的方法来保持即使鼠标指针位于固定元素上仍然可以滚动的功能吗?
<button>
元素粘性定位,但在Safari中无法正常工作,因为默认情况下按钮是inline-block
。 - bryanbraun