Программное изменение положения элемента CSS Grid таинственным образом прокручивает страницу. Почему? Могу ли я останови ⇐ CSS

[Anonymous]

Добрый вечер!
Я пытаюсь создать сетку, в которой элементы сетки можно будет перемещать программно. При перемещении элемента сетки по оси 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;
}

Код: Выделить всё

Test


Y:
+
-

X:
+
-

Эта проблема возникает как в Chrome, так и в Firefox, но, как ни странно, не в Edge.
Можно ли решить эту проблему, я каким-то образом неправильно настроил сетку CSS или столкнулся со странной ошибкой браузера?
Будет оказана помощь очень признателен, я невероятно озадачен, и использование CSS-сетки должно было быть очень важной частью проекта, над которым я работал, когда столкнулся с этой проблемой.
Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/792 ... s-page-why