モバイルサファリのスクロールバーを非表示にするには？

Question

私は、ナビゲーションバーのusignヒスイを作った：

nav.navbar.navbar_white 
    div.navbar__inner 
     ul.nav-list 
      li.nav-list__item_dark 
       a(href="#") item 1 
      li.nav-list__item_dark 
       a(href="#") item 2 
      li.nav-list__item_dark 
       a(href="#") item 3 
      li.nav-list__item_dark 
       a(href="#") item 4 

そして、私はそれがモバイル上に水平にスクロール可能とスクロールバーを非表示にします。ご覧のとおり

.nav-list { 
    padding: 15px 0; 
    margin: 0; 
    width: 100%; 
    list-style: none; 
    white-space: nowrap; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    -webkit-overflow-scrolling: touch!important; 
    -ms-overflow-style: -ms-autohiding-scrollbar!important; 

    &::-webkit-scrollbar { 
     display: none !important; 
     width: 0 !important; 
     height: 0 !important; 
     background-color: transparent; 
    } 

    &::-webkit-scrollbar-thumb { 
     display: none !important; 
    } 
} 

が、私はそれを隠すために知っているあらゆる方法を試してみました： は、だから私は、次のSCSSを書きました。しかし、初めてページを読み込むときにのみ動作します。リロードすると、スクロールバーが再び表示されます。

Answer 1

この問題を解決するクロスブラウザーの方法は、bottom paddingを.navbar__inner要素に設定し、固定高さ（.navbar__innerの計算された高さより小さくする必要があります）とオーバーフロー：外部要素に隠すことです。そのため、スクロールバーは外側の要素の下部よりも下に配置され（上に表示されるため）、表示されません。