`overflow: auto` не скрывает полосу прокрутки в мобильном представлении

Question

У меня есть следующее CSS:

  .show_dropdown {
    max-height: 350px;
    overflow-y: auto;
  }

в мобильном представлении, раскрывающийся список меньше 350px, и это должно скрыть полосу прокрутки, потому что это не нужно. Однако на большом экране он работает нормально и скрывает прокрутку, когда она не нужна.

Спасибо за чтение и помощь

Полный код можно найти здесь

Answer 1

Проблема заключается в padding: 1.25rem 0; в nav > .navbar_list > a, если вы проверяете и проверяете, если для режима просмотра "стоп" padding-top и padding-bottom для каждого тега a установлено значение 43px, тогда как в мобильном представлении это 56px, что увеличивает общую высоту список и в результате видимость полосы прокрутки.

Answer 2

Для этого вы можете использовать префиксы вендоров, и я рекомендую этот подход.

.dropdown_list {
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
.dropdown_list::-webkit-scrollbar { 
    display: none;  /* Safari and Chrome */
}

Codepen: https://codepen.io/CewisLewis/pen/poJyzJV