所以我编写了这个小脚本，其中有两个列表 - 已完成/活动任务，您可以通过点击按钮切换任务列表，也可以通过点击“更多信息”阅读有关任务的更多信息。当点击更多信息时，创建了一个新的 div 元素，我想跟随它的主机元素 Y 位置，并且它可以工作一半。
这就是它的样子：在此处输入图像描述
这是一个错误，当可滚动元素 scrollTop 不为 0 时，我很确定会发生这个错误（它是以正确的方式创建的，每当我开始滚动时，它都会立即向上跳并覆盖任务本身）：输入图像描述在这里。
这是我的代码的一部分，负责识别滚动的 px 量、滚动方向和移动“更多信息”div 元素，以及负责创建它的部分，我不知道在哪里这是问题所在，因为我对整体编码还很陌生，而且我对 css/html 也不太熟悉。
createTooltip() {
const tooltipElement = document.createElement('div');
tooltipElement.className = 'card';
const toolTipTemplate = document.getElementById('tooltip');
const tooltipBody = document.importNode(toolTipTemplate.content, true);
tooltipBody.querySelector('p').textContent = this.text;
tooltipElement.append(tooltipBody);
const hostElPosLeft = this.hostElement.offsetLeft;
const hostElPostop = this.hostElement.offsetTop;
const hostElHeight = this.hostElement.clientHeight;
const parentElementScrolling = this.hostElement.parentElement.scrollTop;
const x = hostElPosLeft + 20;
const y = hostElPostop + hostElHeight - parentElementScrolling - 10;
tooltipElement.style.position = 'absolute';
tooltipElement.style.left = x + 'px';
tooltipElement.style.top = y + 'px';
const scrollHandler = () => {
ulElement.addEventListener('scroll', yLogger);
};
tooltipElement.addEventListener('click', this.closeToolTip);
tooltipElement.addEventListener('click', scrollHandler);
this.element = tooltipElement;
const ulElement = this.hostElement.parentElement;
console.log(ulElement);
let pxPosition = [0];
let currentY = y;
const yLogger = () => {
let scrollDirection;
let pxScrolled = 0;
if (pxPosition.length <= 1) {
pxPosition.push(ulElement.scrollTop);
} else {
pxPosition.push(ulElement.scrollTop);
pxPosition.shift(ulElement);
}
console.log(pxPosition);
if (pxPosition[1] < pxPosition[0]) {
scrollDirection = 'up';
pxScrolled = pxPosition[0] - pxPosition[1];
} else if (pxPosition[0] < pxPosition[1]) {
scrollDirection = 'down';
pxScrolled = pxPosition[1] - pxPosition[0];
}
console.log(pxScrolled);
console.log(scrollDirection);
if (scrollDirection === 'down') {
currentY = currentY - pxScrolled;
console.log(currentY);
tooltipElement.style.top = currentY + 'px';
} else {
scrollDirection === 'up';
currentY = currentY + pxScrolled;
console.log(currentY);
tooltipElement.style.top = currentY + 'px';
}
};
this.hostElement.closest('ul').addEventListener('scroll', yLogger);
}
}
我正在添加 HTML 和 CSS 片段，尽管我认为它们不是必需的，因为它是由我参加的课程讲师编写的。
这是 HTML 片段：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Project Board</title>
<link rel="stylesheet" href="assets/styles/app.css" />
<script src="assets/scripts/app.js" defer></script>
</head>
<body>
<template id="tooltip">
<h2>More Info</h2>
<p></p>
</template>
<header id="main-header">
<h1>Project Planner</h1>
</header>
<section id="active-projects">
<header>
<h2>Active Projects</h2>
</header>
<ul>
<li
id="p1"
data-extra-info="Got lifetime access, but would be nice to finish it soon!"
class="card"
draggable="true"
>
<h2>Finish the Course</h2>
<p>Finish the course within the next two weeks.</p>
<button class="alt">More Info</button>
<button>Finish</button>
</li>
<li
id="p2"
data-extra-info="Not really a business topic but still important."
class="card"
draggable="true"
>
<h2>Buy Groceries</h2>
<p>Don't forget to pick up groceries today.</p>
<button class="alt">More Info</button>
<button>Finish</button>
</li>
</ul>
</section>
<section id="finished-projects">
<header>
<h2>Finished Projects</h2>
</header>
<ul>
<li
id="p3"
data-extra-info="Super important conference! Fictional but still!"
class="card"
draggable="true"
>
<h2>Book Hotel</h2>
<p>
Academind conference takes place in December, don't forget to book a
hotel.
</p>
<button class="alt">More Info</button>
<button>Activate</button>
</li>
</ul>
</section>
<footer>
<button id="im-done-btn">I'm Done!</button>
</footer>
</body>
</html>
这是相关的 CSS 片段：
* {
box-sizing: border-box;
}
html {
font-family: sans-serif;
}
body {
margin: 0;
}
#main-header {
width: 100%;
height: 6rem;
display: flex;
justify-content: center;
align-items: center;
background: #ff0062;
}
#main-header h1 {
color: white;
margin: 0;
}
footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
margin: 1rem 0;
}
section {
margin: 1rem auto;
width: 40rem;
max-width: 90%;
}
section ul {
padding: 1rem;
max-height: 20rem;
overflow: scroll;
}
section > h2 {
color: white;
margin: 0;
}
button {
font: inherit;
background: #ff0062;
color: white;
border: 1px solid #ff0062;
padding: 0.5rem 1.5rem;
cursor: pointer;
}
button.alt {
background: white;
color: #ff0062;
}
button:focus {
outline: none;
}
button:hover,
button:active {
background: #ff2579;
border-color: #ff2579;
color: white;
}
.card {
border-radius: 10px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
padding: 1rem;
background: white;
}
.droppable {
background: #ffe0ec
}
#active-projects {
border: 1px solid #870099;
}
#active-projects > header {
background: #870099;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
#active-projects header h2 {
color: white;
margin: 0;
}
#finished-projects {
border: 1px solid #535353;
}
#finished-projects > header {
background: #535353;
padding: 1rem;
display: flex;
justify-content: space-between;
align-items: center;
}
#finished-projects header h2 {
color: white;
margin: 0;
}
该问题可以通过 CSS 解决，您可以从 Javascript 代码中删除以下内容：
取而代之的是，通过添加以下内容来更改 CSS：
li.card { position: relative; } div.card { position: absolute; top: 0; /* or some other value, experiment until you find the one which works for you */ left: 0; /* same as above */ z-index: 1; }为此，您在 Javascript 代码中创建的
div.card元素必须是相应li.card元素的子元素。我还（可能是错误的）假设您的原始代码类似于我之前找到的代码，并在您的问题的评论中发布，因为我无法运行您的原始代码。您的
position:absolute最初不起作用，因为li.card父级的位置未明确设置，默认为static。编辑忘记提及 z-index 位。这是必需的，因为您的信息框不会完全可见（它将位于下一个
li.card元素下）。