Как сделать полосы прокрутки всегда видимыми на iphone (сафари), используя css - PullRequest
Новая
       7

Как сделать полосы прокрутки всегда видимыми на iphone (сафари), используя css

1 голос
/ 25 мая 2020

У меня есть мобильная навигация со следующим макетом 

<style>
  .fixed-menu {
    position: fixed;
    top: 93px;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    overflow-x: hidden;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    display: none;
  }

  .menu {
    position: relative;
    width: 90%;
    padding-top: 20px;
    background: #fff;
    height: calc(10vh);
    padding-bottom: 50px;
    max-height: 100%;
    overflow-y: scroll;
    overflow: -moz-scrollbars-vertical;
  }

  .fixed-menu ::-webkit-scrollbar {
    width: 5px;
    background-color: #d8d8d8;
    -webkit-box-shadow: none;
    width: 7px;
  }

  .fixed-menu ::-webkit-scrollbar-thumb {
    -webkit-box-shadow: none;
    border-radius: 0;
    background: #1b1b1b;
    /* width: 66px; */
  }
</style>

<div class="fixed-menu open">
  <div class="menu">
    <ul class="menu-options">
      <li>option 1</li>
      <li>option 2</li>
      <li>option 3</li>
      <li>option 4</li>
      <li>option 5</li>
      <li>option 6</li>
      <li>option 7</li>
    </ul>
  </div>
</div>

Поскольку указанные выше параметры выходят за пределы видимой области мобильного окна просмотра, я хочу, чтобы полоса прокрутки всегда была видна на iphone (Safari ) с использованием css, чего в настоящее время не происходит на устройствах iphone. Может ли кто-нибудь предоставить полезные данные.

...