Question

在我的网站上打开模式导致双滚动条（垂直）问题。该模式使用position: fixed和overflow: auto。我知道它是overflow: auto导致问题，但我需要这种风格，因为我的模态包含很多内容，在大多数情况下无法容纳在用户视口中，因此滚动内容是必需的。

.enquire-nav {
    font-family: inherit;
    top: 0;
    left: 0;
    z-index: 999;
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: auto;
    background: rgba(36, 32, 33, .97);
}

提前致谢：]

Answer 1

最后我发现最好的解决方案是在打开模态时在主体上切换一个类，这个类会添加overflow-y: hidden。这允许我滚动模态的内容，如果它溢出身体，但不允许同时滚动身体本身。不再有双滚动条。

jQuery：

  $(".menu-trigger, .primary-nav-item, .hamburger-one").click(function () {
    $(".mobilenav").fadeToggle(500);
    $(".top-menu").toggleClass("top-animate");
    $(".mid-menu").toggleClass("mid-animate");
    $(".bottom-menu").toggleClass("bottom-animate");
    $('body').toggleClass("no-scroll");

  });

CSS：

.no-scroll {
    overflow-y: hidden;
}

Answer 2

所以我在构建自己的jQuery模式插件之前解决了这个问题。这里是github仓库的链接，供参考：https://github.com/thecox/bw-box。我将深入挖掘并找到解决问题的一些相关样式。这是主要结构：

<强> HTML

<div id="default-modal" class="bwbox__modal">
  <div class="bwbox__modal__outer">
    <div class="bwbox__modal__middle">
      <div class="bwbox__modal__inner">
        <a href="#" class="bwbox__modal__inner__close">CLOSE X</a>
        <div class="bwbox__modal__inner__content">
          <!-- Content Goes Here -->
        </div>
      </div>
    </div>
  </div>
</div>

<强> CSS

.bwbox__modal {
  position: fixed;
  display: none;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, .8);
  overflow-y: scroll;
  z-index: 9999;
}

.bwbox__modal__outer {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}

.bwbox__modal__middle {
  position: relative;
  display: table-cell;
  vertical-align: middle;
}

.bwbox__modal__inner {
  position: relative;
  background: #fff;
  font-size: 1em;
  font-weight: 300;
  text-align: left;
  color: #555;
  width: 90%;
  max-width: 885px;
  z-index: 9999;
  padding: 2em 2% 1em;
  margin: 30px auto;

.bwbox__modal__inner__content {
  width: 100%;
  height: 100%;
  z-index: 9999;
  text-align: center;
}

.bwbox__modal__inner__close {
  position: absolute;
  color: #555;
  top: 10px;
  right: 20px;
  font-size: .9em;
  text-decoration: none;
}

基本上，外部，中间和内部容器将容器在框架中垂直和水平居中，这样如果它们扩展到窗口高度以外，您仍然可以滚动。也许下拉并查看演示。如果您有任何问题，请告诉我。

Answer 3

在Angular中，类似于Leon Burman的答案：

  setBodyModalHidden(isHidden: boolean) {
    document.getElementsByTagName('body').item(0).style.overflowY = isHidden ? 'hidden' : '';
  }

模态导致双滚动条

3 个答案: