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

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

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

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

 <div class="outer-container">
     <div class="inner-container">
        <div class="content">
            ......
        div>
     div>
 div>
.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;
}

 
参考:Hiding Vertical Scrollbars with Pure CSS in Chrome,IE(6+),Firefox,Opera,and Safari
https://blog.niceue.com/front-end-development/hide-scrollbar-but-still-scrollable-using-css.html
転載先:https://www.cnblogs.com/alice626/p/6206760.html