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クラスの-webkit-overflow-scrolling: touch;はsafariでのスクロールに慣性を与えてくれます。

.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が想定するモバイルデバイスでのスクロール体験はこれがベスト（仕様）ということでしょう。