ios safariでのスクロールバー表示について

※ご注意：ios Safariでのスクロール問題を可決するための記事ではありません。

iosのsafariで親要素幅を子要素がはみ出す場合にスクロールバーを常に表示させると、慣性スクロールが効かなくなる。
MacとiPhoneのSafariでは、スクロールの挙動が違うので戸惑ってしまう方も多いと思う。
これを解決するために時間をかけるなら、仕様とするなり、分からせUIを実装するなりした方が結果的に良い。

.outer{
  width: 95%;
  margin: 0 auto;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
.outer::-webkit-scrollbar {
  background: #666;
}
.outer::-webkit-scrollbar:horizontal {
  height: 5px;
  }
.outer::-webkit-scrollbar-thumb{
  background: red;
}
.inner{
  width: 2000px;
  padding: 2em;
  background: #ccc;
}

.outer{

width: 95%;

margin: 0 auto;

overflow-y: hidden;

overflow-x: scroll;

-webkit-overflow-scrolling: touch;

}

.outer::-webkit-scrollbar {

background: #666;

}

.outer::-webkit-scrollbar:horizontal {

height: 5px;

}

.outer::-webkit-scrollbar-thumb{

background: red;

}

.inner{

width: 2000px;

padding: 2em;

background: #ccc;

}

outerクラスの-webkit-overflow-scrolling: touch;はsafariでのスクロールに慣性を与えてくれる。

.outer{
  width: 95%;
  margin: 0 auto;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch; //これ
}

.outer{

width: 95%;

margin: 0 auto;

overflow-y: hidden;

overflow-x: scroll;

-webkit-overflow-scrolling: touch; //これ

}

しかし-webkit-overflow-scrolling: touch;を使用すると::-webkit-scrollbarの設定が無視されてしまう。
ios safari以外では、スクロールバーが表示されていてもスクロールに慣性が効いているので、開発ブラウザからiPhoneで確認すると違和感がある。

以前から問題としてチラチラ見ていたが、ios 12のSafari 12でも修正はなかった。
MacとiPhoneでスクロールの挙動が違うのは、Appleが想定するモバイルデバイスでのスクロール体験はこれがベストということだろうか。

関連