向下滚动时，上下文菜单会在奇怪的地方打开

【问题标题】：Context Menu opens in weird places when scrolled down向下滚动时，上下文菜单会在奇怪的地方打开
【发布时间】：2019-12-15 16:43:55
【问题描述】：

我有一个网站，我在其中使用 javascript 放入了一些自定义上下文菜单。当页面加载时，一切正常。但是，当您向下滚动时，上下文菜单会打开我在光标下方滚动的像素数。我在下面包含了我的问题的故障项目。提前致谢！

https://stripe-water-1.glitch.me/

【问题讨论】：

    标签： javascript


    【解决方案1】：

    但是，当您向下滚动时，上下文菜单会打开 我在光标下方滚动的像素。

    您可以通过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/">&#149;&nbsp; Home</a></li>
    <li class="menu-option"><a href="https://www.jeffthecow.com/JeffNews/">&#149;&nbsp; News</a></li>
    <li class="menu-option"><a href="https://www.jeffthecow.com/Projects/">&#149;&nbsp; Projects</a></li>
    <li class="menu-option"><a href="https://www.jeffthecow.com/JeffGames/">&#149;&nbsp; Games</a></li>
    <li class="menu-option" style="border-top: 2px solid lightgrey;"><a href="javascript:window.print()">&#149;&nbsp; Print</a></li>
    <li class="menu-option"><a href="javascript:location.reload()">&#149;&nbsp; Reload</a></li>
    <li class="menu-option"><a href="javascript:window.history.back()">&#149;&nbsp; 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>

    【讨论】：

    • 这是一个写得很好的答案，我非常感谢。很抱歉没有早点看到。太感谢了。 （它也已在我的网站上实现jeffthecow.com）
    猜你喜欢
    • 2017-02-28
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode