禁用面板动画滚动

Question

在我的导航栏中，联系人链接会向下滑动一个面板，该面板覆盖在网站顶部，如下所示：

当面板向下滑动时，我不希望用户能够在面板下方向下滚动。基本上，我想禁用页面上的滚动。如果面板中的内容多于可用空间，则它将在面板中滚动。这可以通过添加overflow来完成：滚动到面板的css，如下所示：

#contactPanel{width:100%; height:100%; overflow:scroll;position: absolute; top:-100%; left:0; z-index: 6; background: #000000; color:white;}

因此，在面板中滚动很好，但我不希望在正文/文档中滚动。

如果纯CSS不可能，javascript就是一个选项。

Answer 1

只要您的“contactPanel”不大于正文（或视口），那么正文就不会滚动。但你可以设置溢出：隐藏只是为了确保它。我猜你实际上只想垂直滚动contactPanel，而不是在两个轴上滚动？使用overflow-y：scroll;

我还建议将文本样式规则移到文本对象本身上......但那只是我。

body {
  overflow:hidden;
}

#contactPanel {
  overflow-y:scroll;

  width:100%;
  height:100%;
  position: absolute;
  top:-100%;
  left:0;
  z-index: 6;
  background: #000000;
}

#contactPanel p {
  color:#fff;
}