为什么我的上下文菜单在页面顶部增加了空白？

Question

我正在尝试为HTML Web应用程序创建一个上下文菜单。隐藏它时，页面顶部没有空格，但是当我激活它时，由于某种原因，它的顶部没有空格。

上下文菜单已禁用：

已启用上下文菜单：

代码如下：

R0.h

是什么原因引起的问题，我需要采取什么步骤来解决该问题？

Answer 1

这是我的解决方法

我将componentWillReceiveProps(nextProps) { if (this.props.Vacations_reducer.vacationsData != nextProps.Vacations_reducer.vacationsData) { console.log("Hello") this.setState({ vacationsDataSource: nextProps.Vacations_reducer.vacationsData }); } } 添加到了position:fixed;

以全屏模式运行以下代码段

#contexmenu

function addJob() {
  alert("");
}

document.addEventListener("contextmenu", function(event) {
  event.preventDefault();
  var contexmenu = document.getElementById("contexmenu")
  contexmenu.style.display = "block";
  contexmenu.style.top = `${event.screenY - 50 - contexmenu.clientHeight}px`;
  contexmenu.style.left = `${event.screenX - 65}px`;
  console.log("New event");
})

document.addEventListener("click", function(event) {
  document.getElementById("contexmenu").style.display = "none";
})

#contexmenu {
  display: none;
  position: relative;
  width: 100px;
  background: rgb(238, 238, 238);
  position: fixed;
}

#contexmenu section {
  padding: 5px;
}

#contexmenu section:hover {
  background-color: rgb(219, 219, 219)
}

#mainarea {
  width: 100vw;
  height: calc(100vh - 50px);
  background: red;
}