如何偏移鼠标位置，以便在用户单击时将段落居中？

Question

我正在创建一个互动网站，用户可以点击任何地方的网页和每一段将显示一个一个。此时，段落显示在点击的右边，但我希望段落以鼠标位置为中心。有办法这样做吗？

是否也有办法限制段落从屏幕上下来，因为这会创建一个我不想要的风景卷轴，任何帮助都将不胜感激。

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

备注

虽然您的代码没有任何问题，但是有一些可以更改的东西应该会使代码更加优化，并且更容易管理代码。

第一个是文本和类的两个数组。创建一个对象数组将允许您只使用一个数组，并且您可以根据正在执行的操作来获取所需的任何键/属性。

另一件事是在设置一些值时使用模板文字而不是字符串连接。这是一件小事，但通常是个好主意。

解决方案

本质上，如果要在鼠标/光标位置上对元素进行居中，则需要将其移动一半的元素为width和height。在这种情况下，我们使用的是动态创建的元素，因此它最初不会有width或height。我们可以先将其添加到文档中，然后提取这些值，然后相应地调整top和left属性。而且，由于JavaScript是同步处理的，用户不会注意到这一点。

​

const paragraphs = [
  {text: `Paragraph: 1`, class: "red gray-bg font-1"},
  {text: `Paragraph: 2`, class: "blue font-2"},
  {text: `Paragraph: 3`, class: "red"},
  {text: `Paragraph: 4`, class: "blue"},
  {text: `Paragraph: 5<br>Different sized paragraph`, class: "red"},
  {text: `Paragraph: 6<br><br><br>Another different sized paragraph`, class: "blue"},
  {text: `Paragraph: 7 | This is a wider paragraph`, class: "red"},
  {text: `Paragraph: 8 | This is also wider but max-width prevents this paragraph from becoming too wide`, class: "blue"},
  {text: `Paragraph: 9`, class: "red"},
  {text: `Paragraph: 10`, class: "blue"}
]

let currentParaIdx = 0

document.body.addEventListener("click", e => {
  if(currentParaIdx === paragraphs.length) return

  const { clientX, clientY } = e,
  div = document.createElement("div")

  div.innerHTML = paragraphs[currentParaIdx].text
  div.className = `${paragraphs[currentParaIdx].class} paragraph`
  currentParaIdx++
  document.body.append(div)

  // Once the div is added, we can get its computed size
  // Then calculate if it will go off screen or not
  let bodyW = parseInt(getComputedStyle(document.body).width),
      bodyH = parseInt(getComputedStyle(document.body).height),
      divW = parseInt(getComputedStyle(div).width),
      divH = parseInt(getComputedStyle(div).height),
      divX = (clientX - Math.round(divW / 2) < 0) ? 0 : (clientX + Math.round(divW / 2) > bodyW) ? bodyW - (divW * 1.1) : clientX - Math.round(divW / 2),
      divY = (clientY - Math.round(divH / 2) < 0) ? 0 : (clientY + Math.round(divH / 2) > bodyH) ? bodyH - (divH * 1.1) : clientY - Math.round(divH / 2)
  
  div.style.left = `${divX}px`
  div.style.top = `${divY}px`
})

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.paragraph {
  max-width: 500px;
  position: absolute;
  cursor: default;
}

.red { color: #F00; }
.blue { color: #00F; }

.gray-bg { background: #CCC; }

.font-1 { font-size: 1em; }
.font-2 { font-size: 1.1em; font-weight: bold; }

​

补充说明

在获取像getComputedStyle()和height这样的东西时，我选择在这里使用width而不是getBoundingClientRect()这样的东西，因为元素上的padding之类的东西会使这些值不准确。我不知道如何使用它的全部背景，我觉得这是一个更安全的选择。

编辑

为了回答一个注释，因为我需要使用backticks和Stack溢出代码格式化会干扰，我在这里添加以下内容：

div.style.top = `${clientY + window.scrollY}px`

基本上，您可以将整个值包装在backticks中，并且任何JavaScript变量都需要包装在${}中。所有其他文本通常都可以放在内部，但是这样您就不需要使用+操作符来连接多个字符串。

Answer 2

您可以使用offsetWidth在鼠标位置对元素进行居中。就像clientX --你元素宽度的一半。

另外一件事，我认为这是你需要的：溢出

Answer 3

一个简单的解决方案可以是使用CSS transform属性将一些CSS添加到您要呈现的段落中。

将以下CSS添加到div中：

div {
    transform: translate(-50%, -50%);
}

这将视觉移动的div离开一半它的宽度和上升一半，它的高度从它的设定位置，实质上是对它的位置。

然后，为了解决景观滚动问题，可以添加一条规则来防止景观溢出，如下所示：

body {
    overflow-x: hidden;
}