はオーバーフロースクロール時WebKitのスクロールバーを非表示にする：我々はすべて知っているようにタッチが

Question

を有効になっている、あなたは以下のCSSスニペットでSafariやクロムでスクロールバーを非表示にすることができます：

::-webkit-scrollbar { 
    display: none; 
} 

しかし、これは動作するようには思えません-webkit-overflow-scrollingがtouchに設定されている場合、特にiOSの場合。 Chromiumはスクロールバーを適切に非表示にします。

これはWebKitのバグですか、またはスクロールバーを非表示にして流体（タッチ）スクロールを有効にする方法がありますか？モバイル版のGoogleでは可能です（おそらくjs？と思われます）。ページのソースを見て、私の答えをグーグルは助けていないようだ。

Answer 1

現在、（2017年1月現在）これを回避する唯一の方法は、スクロール可能な要素を親div内にラップし、手動でスクロールバーを表示から隠すことです。

これは固定高さ/幅とoverflow: hidden;を親divに適用することで実現できます。その後、余分なパディングや高さ/幅を元の要素に追加して、本質的にはスクロールバーを見えなくすることができます。

Mark Ottotweeted about the issue 2016年6月です。回避策の例を次に示します。https://output.jsbin.com/lohiga。

基本的な考え方は、このような何かを行く：

<header> 
    <div> <!-- parent wrapper added --> 
    <nav> 
     <a href="#">First link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Link</a> 
     <a href="#">Last link</a> 
    </nav> 
    </div> 
</header> 

CSS：

header { 
    margin: 20px 0; 
    padding: 10px 5px; 
    text-align: center; 
    background-color: #f5f5f5; 
    border-bottom: 1px solid #ddd; 
} 

// Parent wrapper 
div { 
    height: 30px; 
    overflow-y: hidden; // "crop" the view so the scrollbar can't be seen 
} 

// Original scrollable element 
nav { 
    padding-bottom: 20px; // extra padding to push the scrollbar out of view 
    overflow-x: auto; 
    text-align: center; 
    white-space: nowrap; 
    -webkit-overflow-scrolling: touch; 
} 

nav a { 
    display: inline-block; 
    padding: 5px 10px; 
}