可滚动画布菜单

Question

我刚刚在codepen上找到了一个有趣的非画布菜单。如果有人点击汉堡包图标，它会显示覆盖菜单及其内容。但该叠加菜单根本无法向下滚动。如果有人向下滚动，则后面的页面会滚动;不是叠加菜单。我需要向下滚动该叠加页面。我检查了代码并发现了问题。它使用overflow:hidden作为包装div。我将overflow: auto设置为该div;似乎问题解决了。但是背景页面仍然使用叠加菜单向下滚动。如何才设置仅向下滚动的叠加菜单？

.overlay {
  position: fixed;
  background: $color-main;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}

以下是codepen

的链接

Answer 1

在叠加层上制作row_id，然后添加更多指向菜单的链接。它会滚动。

用于页面滚动，像这样更改jquery

overflow:scroll;

单击菜单时，

将使主体不可滚动。