切断时使绝对定位的元素滚动

Question

在我的网站上，有一个FAQ部分，它位于绝对位置，以便可以从屏幕外滑入。转到http://www.mordstats.com并单击大的“？”在右上角，然后单击“常见问题”以查看它。

当浏览器窗口的高度太短并且FAQ部分被切除时，它不会滚动。是否可以解决此问题，同时仍然允许FAQ部分保持其位置和过渡效果？

向overflow-y: auto添加#faqMenu.menu和/或设置position: fixed无效。老实说，不确定要尝试什么。

完整的HTML代码可以通过查看http://www.mordstats.com上的页面源以及CSS样式here来查看。相关位：

.menu {
  position: absolute;
  top: 71px;
  right: 0px;
  padding: 0;
  overflow: hidden;
  /* other stuff */
  transition: right 0.3s;
}

/* menuHide is removed via JavaScript when corresponding text is clicked */
.menu.menuHide {
  display: block;
  position: absolute;
  height: 124px;
  width: 275px;
  top: 71px;
  right: -275px;
  transition: right 0.4s;
}

#faqMenu.menuHide {
  right: -400px;
}

#faqMenu.menu {
  top: 195px;
  height: auto;
  width: 400px;
  display: flex;
  /* other stuff */
}

<div id="menuBar">
  <!-- left and center divs -->
  <div id="menuRight" class="menuBox">
    <!-- other things -->
    <div id="faqMenu" class="menu menuHide" onclick="event.stopPropagation()">
      <!-- FAQs here -->
    </div>
  </div>
</div>

我希望“常见问题解答”部分在中断时滚动，但不是。

Answer 1

首先，要解决滚动问题-实际上，您只需要定义bottom:0和overflow-y:scroll，其选择器的正确顺序最高，且优先级最高，即div#faqMenu.menu。如果您在#faqMenu.menu或div#faqMenu上定义声明，则可能没有最高优先级，某些声明可能没有应用。您可以查看this article（在有关样式选择器优先顺序的此主题的S.O.无关问题的最高答案中提到）

在上面的屏幕截图中，您可以在检查器样式表摘要中无条件地在此处指定overflow-y，但是我在max-height上应用了媒体查询来确定何时应应用bottom:0 。该值的设置是任意的，并且实际上只是确保FAQ不会总是锁定在最底层，因为在这里并没有真正提到它。另外，我未设置列伸缩流。结果似乎并不理想，因为如果将其作为列水平滚动而不是垂直滚动。

---

修改后的提供的代码段

.menu {
  position: absolute;
  top: 71px;
  right: 0px;
  padding: 0;
  overflow: hidden;
  /* other stuff */
  transition: right 0.3s;
}

/* menuHide is removed via JavaScript when corresponding text is clicked */
.menu.menuHide {
  display: block;
  position: absolute;
  height: 124px;
  width: 275px;
  top: 71px;
  right: -275px;
  transition: right 0.4s;
}

#faqMenu.menuHide {
  right: -400px;
}

#faqMenu.menu {
  top: 195px;
  height: auto;
  width: 400px;
  /*display: flex;*/
  /*bottom:0;*/ 
  overflow-y:scroll;
  flex-flow:unset;
  display:block;
  /* other stuff */
}

@media screen and (max-height: 900px) 
{
    div#faqMenu.menu {
        bottom:0;
    }
}

<div id="menuBar">
  <!-- left and center divs -->
  <div id="menuRight" class="menuBox">
    <!-- other things -->
    <div id="faqMenu" class="menu menuHide" onclick="event.stopPropagation()">
      <!-- FAQs here -->
    </div>
  </div>
</div>