我有一个简单的CSS网格布局,主要部分包含另一个CSS网格。该网格将保存表格数据。我希望当用户滚动(即粘滞)并且用户能够在台式机和移动设备上垂直和水平滚动时,网格标题保持固定。
我觉得我快到了。以下插件可在Chrome上使用: https://plnkr.co/edit/Bx8UOpDNwUGvdtWT
html {
position: fixed;
height: 100%;
overflow: hidden;
}
body {
width: 100vw;
height: 100vh;
overflow: hidden;
}
.layout {
display: grid;
grid-template-columns: auto 1fr;
grid-template-rows: 60px auto;
height: 100vh;
width: 100vw;
grid-template-areas: "head head" "nav main";
}
.head {
grid-area: head;
background: pink;
}
.nav {
grid-area: nav;
width: 200px;
background: lightblue;
}
.main {
grid-area: main;
background: lightgoldenrodyellow;
overflow: auto;
}
.cell {
border-bottom:1px solid lightgrey;
padding: 5px;
white-space: nowrap;
}
.cell-header {
top: 0;
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
background: lightgreen;
padding: 5px;
border-bottom:1px solid lightgrey;
}
.records {
display: grid;
grid-template-columns: 1fr minmax(800px,1fr) 1fr;
grid-template-rows: 40px auto;
overflow: auto;
height: 100%;
background: white;
}
问题是它在Safari上无法正常运行,存在两个问题: (1)标头不粘。它为初始滚动“粘贴”,然后移动。 (2)在iPad / iPhone上的Safari上,用户可以在拖动到屏幕上之前在屏幕上“拖动”网格。
我试图将position:fixed放置在网格上,这解决了粘性标题问题,但它破坏了水平滚动。
.records {
display: grid;
grid-template-columns: 1fr minmax(800px,1fr) 1fr;
grid-template-rows: 40px auto;
overflow: auto;
height: 100%;
background: white;
position:fixed;
}
感谢您的帮助。