时间戳

首页 > 解决方案 > 由于缺少滚动条，全屏导航跳转

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

问题描述

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

剥离 SCSS（当 nav 处于活动状态时）如下所示：

    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元素中删除 以保留滚动条，但这意味着当导航打开时，网站可能会无意中滚动。

任何帮助表示赞赏

麦克风

标签： htmlcss

解决方案

这真的很hacky，但它应该做你想做的......

html {
  overflow-y: hidden;
}

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

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

或者，如果您可以计算出滚动条的宽度（在 Mac 上通常为 15 像素，我认为在 Win 10 中类似），您可以从覆盖大小中减去或添加填充。这比将覆盖设置为稍好一些，overflow-y: scroll因为它不会导致在小屏幕上的覆盖内滚动。

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

推荐阅读