我有一个Electron 表格式的网格.根看起来像这样:
<div id="grid">
<div id="left-column"></div>
<div id="center-column"></div>
<div id="right-column"></div>
<div>
左列和右列各为1列，但中间列为N列.
当向左和向右滚动时，我希望将左右两列锁定在适当的位置，以便它们始终可见.并且只滚动-x中间的列.
然而，当垂直滚动时，我希望锁定所有列中的第一个单元格(标题单元格)，以便它们始终可见.
我有一个基本奏效的方法:
// JS is only used to generate the cells
const cells = Array.from({ length: 20 }).map(c => c = `${Math.floor(Math.random() * 200) + 50}px`)
cells[0] = '120px'
cells[19] = '120px'
const first = cells.shift()
const last = cells.pop()
const rows = Array.from({ length: 100 })
const grid = document.getElementById("grid")
const leftColumn = document.getElementById("left-column")
const centerColumn = document.getElementById("center-column")
const rightColumn = document.getElementById("right-column")
grid.style.display = "grid"
grid.style.gridTemplateColumns = `${first} 1fr ${last}`
function makeItem(text) {
const div = document.createElement("div")
div.classList.add('cell')
const newContent = document.createTextNode(text);
div.appendChild(newContent);
return div;
}
function makeRow() {
const innerGrid = document.createElement("div")
innerGrid.style.display = "grid"
innerGrid.style.gridTemplateColumns = cells.join(' ')
cells.forEach((cell, index) => {
const child = makeItem(`cell ${index + 1}`)
innerGrid.appendChild(child)
})
const a = makeItem('First')
const z = makeItem('Last')
leftColumn.appendChild(a)
centerColumn.appendChild(innerGrid)
rightColumn.appendChild(z)
}
rows.forEach(() => {
makeRow()
}).cell {
background: #eee;
font-family: Arial;
border: 0.5px solid black;
color: #333;
height: 30px;
display: grid;
align-items: center;
text-align: center;
}
#grid {
width: min(100%, 1000px);
max-height: 300px;
overflow: scroll;
position: relative;
border: 0.5px solid black;
}
#center-column {
overflow-x: scroll;
}
#left-column > .cell, #right-column > .cell, #center-column > :first-child > .cell {
font-weight: bold;
color: black;
background: #aaa;
color: #eee;
}
#left-column > :first-child,
#right-column > :first-child,
#center-column > :first-child,
#center-column > :first-child > .cell{
position: sticky;
top: 0;
background: #d70000;
}
#center-column {
position: relative;
}<div id="grid">
<div id="left-column"></div>
<div id="center-column"></div>
<div id="right-column"></div>
<div>但是，当您垂直滚动时，左列和右列标题保持锁定，而中心标题不锁定.
我知道为什么.这是因为为了实现我想要的水平滚动行为，我需要使中间的列具有溢出滚动.这消除了使页眉锁定在适当位置的粘性位置(仅用于中心列).
所以我知道导致它不工作的问题.但我找不到一种纯粹的css解决方案.我可以使用JavaScript来实现这一点，但我正在try 寻找一种纯CSS解决方案.
我可以使用任何嵌套的html元素和样式需要我只是想要一个纯css的解决方案.