晚上好，
我正在尝试创建一个网格系统，其中网格中的项目可以通过编程方式移动。在 Y 轴上移动网格项目时（通过更新其
grid-row这既不可取又令人困惑。我希望页面保留在当前位置，仅将项目在页面上向下移动。
我为这种行为举了一个非常简单的例子。如果您稍微向下滚动视口，使网格项的顶部被视口顶部遮挡，然后按
+Y:X（全屏运行下面的代码片段来体验该问题可能是个好主意）
let y = 0;
let x = 0;
const item = document.getElementById("item");
const plusY = document.getElementById("plusY");
const minusY = document.getElementById("minusY");
const plusX = document.getElementById("plusX");
const minusX = document.getElementById("minusX");
const updatePosition = (newY, newX) => {
if (newY < 0) {
newY = 9;
}
y = Math.abs(newY) % 10;
if (newX < 0) {
newX = 9;
}
x = Math.abs(newX) % 10;
item.style = `grid-column: ${x + 1} / span 1; grid-row: ${y + 1} / span 1`;
};
plusY.addEventListener("click", () => {
updatePosition(y + 1, x);
});
minusY.addEventListener("click", () => {
updatePosition(y - 1, x);
});
plusX.addEventListener("click", () => {
updatePosition(y, x + 1);
});
minusX.addEventListener("click", () => {
updatePosition(y, x - 1);
});*,
*:before,
*:after {
box-sizing: border-box;
}
body {
background-color: black;
color: white;
}
#grid {
padding: 20px;
background-color: white;
display: grid;
width: 885px;
height: 885px;
gap: 5px;
grid-template-columns: repeat(10, 80px);
grid-template-rows: repeat(10, 80px);
}
#item {
border: 1px solid black;
grid-column: 1 / span 1;
grid-row: 1 / span 1;
color: black;
}
.buttons {
display: flex;
justify-content: center;
width: 800px;
}<html>
<body>
<div id="grid">
<div id="item">Test</div>
</div>
<div class="buttons">
Y:
<button id="plusY">+</button>
<button id="minusY">-</button>
</div>
<div class="buttons">
X:
<button id="plusX">+</button>
<button id="minusX">-</button>
</div>
<div style="width: 4000px; height: 2000px"></div>
</body>
</html>Chrome 和 Firefox 中都会出现此问题，但奇怪的是 Edge 中却没有。
这个问题可以解决吗？我是否以某种方式错误配置了 CSS 网格，或者我是否遇到了一个奇怪的浏览器错误？
非常感谢您的帮助，我非常困惑，当我遇到这个问题时，CSS 网格的使用是我正在从事的项目的一个非常重要的部分。
谢谢。
层叠样式表 Discord 的网络链为我指明了正确的方向！
问题似乎与滚动锚定有关！他链接了该主题的this page，其中提到了确定哪个元素用作滚动锚点的方法。在这种情况下，我确定文本被用于滚动锚点。
在网格或项目上使用建议的
overflow-anchor: none;