スクロールバーを非表示にした状態でスクロールを可能にする方法

時々、スクロールはさせたいけど、スクロールバーは表示したくないといったことがあります。なにか方法がないか調べるのですが、すべてのブラウザに対応し、見栄えもよく、無駄なエリアを作らないで済むといった方法はなさそうです。

以下はwebkit（ChromeやSafari）限定の方法。FireFoxやEdgeでは使えません。

.scrollbar_none{
    height:200px;
    overflow-y:auto;
}
.scrollbar_none::-webkit-scrollbar{
    display:none;
}

実際の表示は以下のようになります。

IE（Internet Explorer）やMicrosoft Edgeでスクロールバーを非表示にするには、「-ms-overflow-style」を指定します。

.scrollbar_none{
    height:200px;
    overflow-y:auto;
    -ms-overflow-style:none;
}

実際の表示は以下のようになります。

「-ms-overflow-style」には自動でスクロールバーの表示が切り替わるようにすることも可能なので、各設定値による動作の違いはこちらを確認すると分かりやすいと思います。

<div style="width:100%;height:200px;overflow:hidden;">
    <div style="width:calc(100% + 20px);padding-right:20px;height:200px;overflow-y:auto;">
    </div>
</div>

パッと見は問題なさそうに見えますが、こちちの方法の問題点は、ブラウザ毎にスクロールバーの幅が異なることと、スクロールバーの表示／非表示で右側の領域を調整してやらないといけないことで、調整しない場合は途中で文字が切れたりします。

他に方法があるかもしれませんが、ここでの結論としては、「-webkit-scrollbar」と「-ms-overflow-style」を使ってスクロールバーを消せるブラウザは消して、消さないブラウザはスクロールバーが表示されてしまっても問題ないように作る、というのが一番いいように感じます。