如何在向下滚动页面后继续鼠标单击功能？

Question

我试图创建一个交互式网站，让用户点击任何地方的网页和文本将显示在那个确切的鼠标位置。但是，当我向下滚动页面时，onclick函数没有使用确切的鼠标位置，而是出现在其他地方。在向下滚动页面后，我将如何继续这个功能？

const texts = [
  "Paragraph: 1",
  "Paragraph: 2",
  "Paragraph: 3",
  "Paragraph: 4",
  "Paragraph: 5",
  "Paragraph: 6",
  "Paragraph: 7",
  "Paragraph: 8",
  "Paragraph: 9",
  "Paragraph: 10"
];
const classes = [
  "red gray-bg font-1",
  "blue font-2",
   "red",
  "blue",
   "red",
  "blue",
   "red",
  "blue",
   "red",
  "blue",
  
];
// Keeps Track of Current Text
let currentParaIdx = 0;

document.addEventListener("click", (e) => {
  // Stop once All Texts are Displayed
  if (currentParaIdx === texts.length) return;

  const { clientX, clientY } = e; //get the click position

  //create the div
  const div = document.createElement("div");

  //set its text
  div.innerText = texts[currentParaIdx];


  //set its position and position style
  div.classList=classes[currentParaIdx];
  div.style.position = "absolute";
  div.style.left = clientX + "px";
  div.style.top = clientY + "px";
  currentParaIdx++;
  document.body.append(div); //add div to the page
});

这段代码的工作原理与我向下滚动页面时不同。如果有人知道如何做到这一点，我们将不胜感激。

Answer 1

尝试以下操作，添加窗口滚动pos

div.style.top = (clientY + window.scrollY) + "px";