Question

我有一个带有全屏覆盖导航的站点，该站点在触发时会隐藏html元素上的溢出。这是为了在导航打开时停止滚动导航后面的页面。

压缩后的SCSS（在启用导航时）如下所示：

    html.nav-is-active {
      overflow: hidden
    }
    
    nav.active {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      z-index: 1600000;
    }

我的问题是，在打开导航栏时，滚动条消失了，导致页面跳转-这尤其令人迷惑，因为导航栏上有一个关闭按钮，应该与站点上的菜单按钮对齐。

我的问题是如何最好地解决这个问题？我可以从overflow:hidden元素中删除html来保留滚动条，但这意味着在打开导航栏时可以无意地滚动该站点。

任何帮助表示赞赏

迈克

Answer 1

这确实很hacky，但是它应该做您想要的...

html {
  overflow-y: hidden;
}

body {
  overflow-y: scroll; // causes an empty scrollbar
  height: auto; //set height = content so body can't overflow
}

您可以使滚动条在叠加层中以相同的方式可见。

或如果您可以弄清楚滚动条的宽度（在Mac上通常为15px，并且与Win 10相似，我认为），则可以从覆盖尺寸中减去或添加填充。这比将叠加层设置为overflow-y: scroll稍好，因为它不会导致在小屏幕上在叠加层内部滚动。

nav.active {
  width: calc(100vw - 15px); // could be done with javascript
}

Answer 2

class TeachersSerializer(ModelSerializer): def update(self, instance, validated_data): instance.vote += 1 instance.save() return instance是没有overflow: hidden;的块滚动的另一种选择，因此只需更改以下内容即可：

position: fixed; overflow-y:scroll;

与此：

html.nav-is-active {
  overflow: hidden;
}

您将看到一个空的滚动条，但是该页面将不再“跳转”。

由于缺少滚动条，全屏导航跳转

2 个答案: