jquery - 使用面板动画禁用滚动

Question

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

当面板向下滑动时，我不希望用户能够在面板下方向下滚动。基本上，我想禁用页面上的滚动。如果面板内的内容多于可用空间，它将在面板内滚动。只需将 overflow:scroll 添加到面板的 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

So long as your "contactPanel" is not larger than the body (or viewport) then the body won't scroll. But you can set overflow:hidden just to make sure of it. I'm guessing you actually only want to scroll the contactPanel vertically as well, and not on both axis? Use overflow-y:scroll;

I'd also recommend moving text styling rules onto to the text objects themselves... but that's just me.

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;
}