ヘッダー下の人気記事、カテゴリー（メニュー）を横スクロールできるようにカスタマイズしたんですが、実は、その時諦めたことがありました。
それは、「慣性スクロール」の実装です。カクカクせずに、滑らかにスクロールできるようにしたかったんですが、いまいち思った挙動になりませんでした。。
慣性スクロールとは？
まず、本題に入る前に、「慣性スクロール」についてご紹介してみましょう。
慣性スクロールとは、主にマルチタッチインターフェースで採用されている機能で、画面を素早くスクロールさせた際、指を画面から離しても急には止まらず、慣性が作用しているようにスクロールがある程度維持される機能のことである。
慣性スクロールが機能することで、スクロール操作の繰り返しが連続的な動作になる。あたかもキックボードで地面を蹴り進むようにスムーズにスクロールできるだけでなく、タッチパネルのように操作範囲が限られたユーザーインターフェース上でも効率的にスクロールできる。
慣性スクロールの機能は、AppleのiPhoneやiPod touch、Magic Mouse、新型MacBookのマルチタッチトラックパッドなどに搭載されている。Google Mapsのように、PC上でマウスのドラッグ&ドロップによる慣性スクロールに対応したサービスもある。
引用：慣性スクロール
慣性スクロールの実装方法
さて、そんな慣性スクロールの実装方法ですが、実は、かなり簡単です。スクロールさせたい要素に下記のコードを追加するだけです。
-webkit-overflow-scrolling: touch;僕がメインで使っているコードエディターではエラー表示になってしまう（赤文字になる）んですが、しっかり慣性スクロールになりました。
また、パソコンのテスト環境（MANPなど）ではコードが反映されなかったんですが、本番環境ではコードが反映されていました。
慣性スクロールを実装すると、スクロールバーを常に表示することはできない？
ただ、1つだけ問題があり、慣性スクロールを実装すると、スクロールバーを常に表示することが難しくなります。
- スクロールバーを常に表示
- その状態で慣性スクロールを実装
何とかがんばって、この2つを両立させようと試みたんですが…CSSだけで実装するのはムリでした。なぜか、慣性スクロールにするとスクロールバーが常に表示されないんです。
「いやいや、そんなことないでしょー」と調べてみても、それを覆すことはできず。やはり、現時点ではできないみたいです。
慣性スクロールでも常にスクロールバーを表示させるCSSとかあるのかな？
— シェフ@青森県移住ブロガー (@chef_moriawase) 2016年7月31日
やっぱり両立できないのかぁ。ちょっと残念https://t.co/8mGxOlOILX
— シェフ@青森県移住ブロガー (@chef_moriawase) 2016年7月31日
慣性スクロール or スクロールバー
ということで、現時点の選択肢は下記の2つだと思われます。
- 慣性スクロールを実装する
- スクロールバーを常に表示する
どちらを取るかはケースバイケースだと思いますが、僕はスクロールバーを常に表示することにしています。スクロールできると気づいて欲しいので。
「いや！どうしても、慣性スクロールにしたい！」という方は、CSS3のanimation（アニメーション）プロパティを利用するのがベストでしょう。
スマホ表示時のSTORK（ストーク）がまさにその方法を取っていますが、「右矢印」が点滅しているので、「スクロールできるんだな」と気づいてもらいやすいはずです。
まとめ
JavaScriptならできると思うんですが、知見がないので今回は断念。早くCSSだけでできるようにならないかと祈ってます（他力本願）
僕と同じように悩んでいる方に参考にしていただければ嬉しいです！そして、良い解決方法を知っている方がいれば、ご教示ください〜（涙）
