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

【问题标题】：Make absolute-positioned element scroll when cut off切断时使绝对定位的元素滚动
【发布时间】：2020-02-22 07:23:04
【问题描述】：

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

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

将overflow-y: auto 添加到#faqMenu.menu 和/或设置position: fixed 无效。老实说，不知道还能尝试什么。

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

.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>

我希望常见问题解答部分在它被切断时滚动，但它没有。

【问题讨论】：

这个问题究竟如何重现？
只需缩小浏览器窗口的高度并打开常见问题解答部分。由于 Dock 的存在，MacOS（或至少我的 MacBook）上也存在此问题。
我将更新您的问题并提供屏幕截图。简短的回答是，是的，当您知道常见问题解答的高度时，您应该能够通过有关高度的媒体查询来完成此操作。
如果您在这里仍然没有问题，请告诉我...不过，如果答案解决了您的问题或解决了您的问题，请确保投票并接受并回答。
抱歉，我有点心烦意乱，没有动力尝试您的解决方案，但我非常感谢您的回复，一旦我给它一个答案，我一定会这样做去吧。

标签： html css scrollbar overflow absolute

【解决方案1】：

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

在上面的屏幕截图中，您可以在检查器样式表 sn-p 中看到我在此处无条件指定 overflow-y，但我在 max-height 上应用了媒体查询以确定何时应应用 bottom:0。此处设置的值是任意的，实际上只是为了确保常见问题解答并不总是锁定在底部，因为这里并没有真正提到它作为一个愿望。此外，我取消了列 flex-flow。结果似乎并不理想，因为 if 会作为列水平滚动，而不是垂直滚动。

修改后提供sn-p

.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>

【讨论】：