How to synchronize dom rendering and scrolling?

I have a border made with div elements, the position and size of which is calculated depending on the scroll. This works, but there is a nasty lag effect. I think that this is due to the fact that the browser first renders the image after scrolling, and only then throws the scroll event.

I used to draw this border with one div and it was ok, but when i made fixed rows and columns it became not possible. It is also not possible to use borders on td due to merged cells.
The following is a code example where this problem is already sometimes manifested. I'm creating 100 elements for demonstration purposes, but even with just one element, the problem can be seen on a 4k monitor.

const app = document.querySelector("#app");
const container = document.querySelector(".container");
const boxes = [];
for (let i = 0; i < 100; i++) {
  const box = document.createElement("div");
  box.classList.add("box");
  box.style.left = `${20 + i}px`;
  box.style.top = `${20}px`;
  boxes.push(box);
  container.append(box);
}

app.addEventListener("scroll", () => {
  for (const box of boxes) {
    box.style.top = `${app.scrollTop + 20}px`;
  }
});

html,
body {
  margin: 0;
}

#app {
  overflow-y: scroll;
  width: 100%;
  height: 100vh;
}

.container {
  height: 3000px;
  position: relative;
  background: gray;
}

.box {
  position: absolute;
  background: red;
  width: 100px;
  height: 100px;
}

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
</head>

<body>
  <div id="app">
    <div class="container"></div>
  </div>

  <script src="src/index.js"></script>
</body>

</html>

Via Active questions tagged javascript - Stack Overflow https://ift.tt/yamfut0