如何解决页面滚动后鼠标点击生成文本位置偏移问题

你遇到的滚动后位置偏移问题，根源是**clientX/clientY的坐标参考系不匹配**：

• clientX/clientY是相对于当前浏览器视口的左上角计算的，页面滚动后，文档的左上角已经移出视口，但position: absolute的元素是相对于body（文档根节点）的左上角定位的，两者原点不一致，就会导致位置偏移。

改用**pageX/pageY**获取点击坐标，这两个属性是相对于文档左上角的位置，不管页面是否滚动，都能和body绝对定位的原点完美匹配。

另外，原代码中直接给div.classList赋值字符串的写法不规范，应该用classList.add()方法添加多个类名，避免破坏默认的类列表行为。

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;

  // 改用pageX/pageY获取相对于文档的坐标
  const { pageX, pageY } = e;

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

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

  // 正确添加类名
  div.classList.add(...classes[currentParaIdx].split(' '));
  div.style.position = "absolute";
  div.style.left = pageX + "px";
  div.style.top = pageY + "px";
  
  currentParaIdx++;
  document.body.append(div); //add div to the page
});

如果需要兼容非常旧的浏览器（不支持pageX/pageY），也可以手动计算坐标：

const x = e.clientX + window.scrollX;
const y = e.clientY + window.scrollY;

效果和pageX/pageY完全一致。

内容的提问来源于stack exchange，提问作者wophi_1888