我正在使用CSS position: sticky将一些元素粘贴到我的页面上。我正在使用<div>来生成类似网格的结构（<table>不适合我的用例）。请注意，这是一个专门针对position: sticky的问题-我不是在寻找Javascript解决方案，并且我相信position: sticky 应该根据规范和其他浏览器中的行为。
我需要粘贴一行进行垂直滚动，而该行中的第一个单元格进行水平滚动。如果我在第一个单元格上使用position: sticky; left: 0;而没有粘贴该行，则该单元格会紧贴左侧。但是，如果我使用的是在Safari中
.row {
position: sticky;
top: 10px;
width: ...
}
.cell {
position: sticky;
left: 0;
width: ...
}
行在按需要垂直滚动时会粘住，但单元格在水平滚动时不会粘住。
该代码在Chrome和Firefox中以及在Safari的iframe中在和 中符合要求。
下面是一些简单示例的代码：
CSS：
.row {
position: -webkit-sticky;
position: sticky;
top: 10px;
white-space: nowrap;
width: 2000px;
z-index: 30;
}
.cell {
display: inline-block;
width: 100px;
}
.sticky {
position: -webkit-sticky;
position: sticky;
left: 0;
font-weight: bold;
}
HTML：
<div class="row">
<div class="cell sticky">Sticky</div>
<div class="cell">Content</div>
<div class="cell">Content</div>
...
</div>
此处上传的文件（加载到iframe中时不能使用codepen / jsfiddle）：
https://qcn.github.io/minimal_sticky.html最小示例：在Safari中不起作用，在Chrome / Firefox中起作用
https://qcn.github.io/minimal_sticky_iframe.html相同的最小示例已加载到iframe中：确实可以在Safari中工作！
我注意到的另一件有趣的事情是，如果我水平滚动页面然后刷新，则粘性单元格将在视口的左侧渲染，然后在该位置正常滚动（即，它仍然不粘性，但是知道它应该在页面加载的位置！）。这种行为在iframe内和其他浏览器中均有效，这一事实使我怀疑这是浏览器错误，但我找不到其他引用。
答案 0 :(得分：0)
这似乎是此错误的一个实例：https://bugs.webkit.org/show_bug.cgi?id=106062
我通过将页面包装在滚动div中以包含页面来解决此问题，而不是使用视口滚动。不太理想，但似乎是浏览器错误。
答案 1 :(得分：0)