Question

我有一个类似于fullPage.js的网站，其中页面仅覆盖屏幕，没有其他单词的滚动条。但是，该站点包含指向具有不同类型内容的模态窗口的链接。我想知道的是，考虑到网站的其他部分是不可以的，可以使这些模态可滚动。

如果我强制使用垂直滚动条，我会在网站上获得滚动条但是，由于某种原因无法使用它。

这是模态窗口：

＆＃13;

$('#video-pop').click(function() {
  $('#open-menu').fadeIn(350);
});

$('#close-menu').click(function() {
  $('#open-menu').fadeOut(350);
});

＆＃13;

#open-menu {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 60;
  background: #060606;
  display: none;
}

.menu-content {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#close-menu {
  color: #fff;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="video-pop">OPEN PAGE</div>
<div id="open-menu">
  <div class="menu-content">
    <div id="close-menu">CLOSE PAGE</div>
  </div>
</div>

＆＃13;

JSFiddle：https://jsfiddle.net/neaqs3bv/

Answer 1

您的#open-menu可能指定了这样的滚动样式：

#open-menu {
    /* ... your styles */
    overflow: hidden;
    overflow-y: scroll;
}

Answer 2

如您所见，滚动条永远不会显示，因为open-menu只会填充屏幕的剩余部分而menu-content会填充open-menu。换句话说，永远不会有任何需要滚动的溢出。

为了显示滚动条，请将menu-content的高度设置为大于open-menu的高度，并将overflow-y: auto添加到open-menu。这是一个例子：

#open-menu {
  position:fixed;
  width:100%;
  height: 50%;
  z-index: 60;
  background: #060606;
  display: none;
  overflow-y: auto;
}
.menu-content {
  position: relative;
  height: 500px;
}

#close-menu {
  color: #fff;
  padding-top: 250px;
}

https://jsfiddle.net/oze4wv1v/

将滚动条添加到模态窗口

2 个答案: