Сделайте прокрутку элемента с абсолютным позиционированием при обрезании

Question

На моем веб-сайте есть раздел часто задаваемых вопросов, который позиционируется абсолютно, чтобы он мог скользить вне экрана. Перейдите на http://www.mordstats.com и нажмите большое "?"в правом верхнем углу, а затем в разделе «Часто задаваемые вопросы», чтобы увидеть его.

Когда высота окна браузера слишком мала и раздел часто задаваемых вопросов обрезан, он непрокрутки. Можно ли это исправить, но при этом разрешить разделу FAQ сохранять свою позицию и эффекты перехода?

Добавление overflow-y: auto в #faqMenu.menu и / или настройка position: fixed не работали. Честно говоря, не уверен, что еще можно попробовать.

Полный код HTML можно просмотреть, просмотрев исходный код страницы в http://www.mordstats.com, и стилизацию CSS здесь . Соответствующие биты:

.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, возможно, вы не имели наивысшего приоритета, некоторые декларации могут не применяться. Вы можете просмотреть эту статью (упомянутую в верхнем ответе на несвязанный вопрос SO по этой теме порядка приоритета селектора стиля)

На снимке экрана вышеВы можете увидеть в фрагменте таблицы стилей инспектора, который я безоговорочно обозначил overflow-y, но я применил медиазапрос к max-height, чтобы определить, когда следует применять bottom:0. Значение установлено там было произвольным, и это было действительно только для того, чтобы убедиться, что FAQ не всегда защелкивается, так как это не было упомянуто как желание. Кроме того, я отключил столбец flex-flow. Результат не кажется желательным, так как если бы прокручивать по горизонтали как столбцы, а не по вертикали.

---

Модифицированный предоставленный фрагмент

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