CSSはスクロールバーを隠しながらスクロールできる

モバイル側のページは、オリジナルの体験に近づくために、スクロールバーを隠すとともに、ページがスクロールできることを保証できますか?overflow:hiddenを使用してスクロールバーを非表示にしますが、ページまたは要素がスクロールの特性を失っているという問題があります.モバイルブラウザ(ChromeとSafari)との互換性のみが必要であるため、カスタムスクロールバーの擬似オブジェクトセレクタ::-webkit-scrollbarが考えられる.
 
次のCSSを適用すると、スクロールバーを非表示にできます.

.element::-webkit-scrollbar {display:none}

PCの他のブラウザ(IE、Firefoxなど)と互換性を持つためには、海外の才能者John Kurlakも一つの方法を検討した.容器の外にoverflow:hiddenの内部内容をさらにネストし、寸法を制限すると外部ネスト層と同様に、変相が隠れてしまう.

     

        

            ......
        
     
 
.outer-container,.content {
    width: 200px; height: 200px;
}
.outer-container {
    position: relative;
    overflow: hidden;
}
.inner-container {
    position: absolute; left: 0;
    overflow-x: hidden;
    overflow-y: scroll;
}

 /* for Chrome */
.inner-container::-webkit-scrollbar {
    display: none;
}

　　
転載先:https://www.cnblogs.com/AaronNotes/p/6491800.html