我有一个网站，我在其中使用 javascript 放置了一些自定义上下文菜单。当页面加载时，一切正常。但是，当您向下滚动时，上下文菜单会打开我在光标下方滚动的像素数。我在下面包含了我的问题的故障项目。提前致谢!
最佳答案
However, when you scroll down, the context menu opens up the number of pixels that I have scrolled below the cursor.
您可以通过 element.scrollTop 查看滚动了多少像素。这里滚动应用于您的 html。所以你需要获取html.scrollTop。 html 对象将通过 document.getElementsByTagName('html')[0]; 获得
如下更新您的最高排名。
menu.style.top = (top - html.scrollTop) + "px";
您可以查看下面的完整代码。
const menu = document.querySelector(".menu");
let menuVisible = false;
let html = document.getElementsByTagName('html')[0];
const toggleMenu = command => {
menu.style.display = command === "show" ? "block" : "none";
menuVisible = !menuVisible;
};
const setPosition = ({ top, left }) => {
menu.style.left = left + "px";
menu.style.top = (top - html.scrollTop) + "px";
toggleMenu("show");
};
window.addEventListener("click", e => {
if (menuVisible) toggleMenu("hide");
});
window.addEventListener("contextmenu", e => {
e.preventDefault();
const origin = {
left: e.pageX,
top: e.pageY
};
setPosition(origin);
return false;
});/* CSS files add styling rules to your content */
.center {
text-align: center;
}
.menu {
width: 200px;
box-shadow: 0 4px 5px 3px rgba(0, 0, 0, 0.2);
position: fixed;
display: none;
z-index: 999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999999;
transition: 0.2s display ease-in;
background-color: #333;
border: 2px solid lightgrey;
margin: 0px;
}
.menu-options {
list-style: none;
padding: 0px;
z-index: 1;
margin: 0px;
}
.menu-option a {
font-weight: 500;
z-index: 1;
font-size: 14px;
padding: 10px 40px 10px 20px;
// border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
color: lightgrey;
text-decoration: none;
margin-left: -20px;
}
.menu-option {
font-weight: 500;
z-index: 1;
font-size: 14px;
padding: 10px 40px 10px 20px;
// border-bottom: 1.5px solid rgba(0, 0, 0, 0.2);
cursor: pointer;
border-bottom: 1px solid lightgrey;
color: lightgrey;
}
.menu-option:hover {
background: rgba(0, 0, 0, 0.5);
}<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello!</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- import the webpage's stylesheet -->
<link rel="stylesheet" href="/style.css">
<!-- import the webpage's javascript file -->
<script src="/script.js" defer></script>
</head>
<body onclick="document.getElementById('menu').style.display = 'none';">
<div class="menu">
<ul class="menu-options">
<li class="menu-option" style="border-top: 1px solid lightgrey;"><a href="https://www.jeffthecow.com/">• Home</a></li>
<li class="menu-option"><a href="https://www.jeffthecow.com/JeffNews/">• News</a></li>
<li class="menu-option"><a href="https://www.jeffthecow.com/Projects/">• Projects</a></li>
<li class="menu-option"><a href="https://www.jeffthecow.com/JeffGames/">• Games</a></li>
<li class="menu-option" style="border-top: 2px solid lightgrey;"><a href="javascript:window.print()">• Print</a></li>
<li class="menu-option"><a href="javascript:location.reload()">• Reload</a></li>
<li class="menu-option"><a href="javascript:window.history.back()">• Back</a></li>
</ul>
</div>
<h1 style="text-align: center;">
Scroll down then right click to see the issue.
</h1>
<p style="text-align: center;">
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
text is for scrolling...<br>
</p>
<!-- include the Glitch button to show what the webpage is about and
to make it easier for folks to view source and remix -->
<div class="glitchButton" style="position:fixed;top:20px;right:20px;"></div>
<script src="https://button.glitch.me/button.js"></script>
</body>
</html>关于javascript - 向下滚动时，上下文菜单会在奇怪的地方打开，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57404672/