J3FF_The_Cow
Reputation: 45
Context Menu opens in weird places when scrolled down
I have a website where I have put in some custom context menus using javascript. When the page loads, everything works out fine. However, when you scroll down, the context menu opens up the number of pixels that I have scrolled below the cursor. I have included a glitch project of my problem below. Thanks in advance!
https://stripe-water-1.glitch.me/
Upvotes: 3
Views: 1211
Answers (1)
Karan
Reputation: 12629
However, when you scroll down, the context menu opens up the number of pixels that I have scrolled below the cursor.
You can findout how many pixels you scrolled by element.scrollTop. Here scroll is applied to your html. So you need to get html.scrollTop. html object will be obtained by document.getElementsByTagName('html')[0];
Update your top position as below.
menu.style.top = (top - html.scrollTop) + "px";
You can check below complete code.
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: 999;
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>Upvotes: 4
Related Questions
- Positioning Context Menu
- Set mouse position for context menu
- Why does my contextual menu add empty space to top of page?
- Right click menu not displaying in correct position
- Context menu becomes unclickable above HTML video layer
- Small bug with click-to-scroll menu in jQuery
- Javascript Menu Jumping from bottom to top instead of Scrolling
- context menu - javascript
- jQuery ContextMenu doesnot appear fully if element is at the bottom of the page
- Positioning of Context menu