MORIAWASE

好きなもの、好きなだけ、盛り合わせ

今日の人気記事です!

慣性スクロール実装でスクロールバーは常に表示できない?

   

scroll-bar

ヘッダー下の人気記事、カテゴリ(メニュー)を横スクロールできるようにカスタマイズしたんですが、実は、その時諦めたことがありました。

それは、「慣性スクロール」の実装です。カクカクせずに、滑らかにスクロールできるようにしたかったんです。

慣性スクロールとは、主にマルチタッチインターフェースで採用されている機能で、画面を素早くスクロールさせた際、指を画面から離しても急には止まらず、慣性が作用しているようにスクロールがある程度維持される機能のことである。

慣性スクロールが機能することで、スクロール操作の繰り返しが連続的な動作になる。あたかもキックボードで地面を蹴り進むようにスムーズにスクロールできるだけでなく、タッチパネルのように操作範囲が限られたユーザーインターフェース上でも効率的にスクロールできる。

慣性スクロールの機能は、AppleのiPhoneやiPod touch、Magic Mouse、新型MacBookのマルチタッチトラックパッドなどに搭載されている。Google Mapsのように、PC上でマウスのドラッグ&ドロップによる慣性スクロールに対応したサービスもある。

引用:慣性スクロール

慣性スクロールの実装方法

スクロールを滑らかにするための方法はとっても簡単。スクロールさせたい要素に下記のコードを追加するだけです。

僕がメインで使っているコードエディターではエラー表示になってしまう(赤文字になる)んですが、しっかり慣性スクロールになりました。

また、パソコンのテスト環境(MANPなど)ではコードが反映されなかったんですが、本番環境ではコードが反映されていました。

慣性スクロールを実装すると、スクロールバーを常に表示することはできない?

僕がやりたかったことはこうです。

  1. スクロールバーを常に表示
  2. その状態で慣性スクロールを実装

何とかがんばって、この2つを両立させようと試みたんですが…CSSだけで実装するのはムリでした。なぜか、慣性スクロールにするとスクロールバーが常に表示されないんですよね。

「いやいや、そんなことないでしょー」と調べてみても、それを覆すことはできず。やはり、現時点ではできないみたいです。

慣性スクロール or スクロールバー

ということで、現時点の選択肢は下記の2つだと思われます。

  1. 慣性スクロールを実装する
  2. スクロールバーを常に表示する

どちらを取るかはケースバイケースだと思いますが、僕はスクロールバーを常に表示することにしています。スクロールできると気づいて欲しいので。

 

「いや!どうしても、慣性スクロールにしたい!」という方は、CSS3のanimation(アニメーション)プロパティを利用するのがベストでしょうね。

スマホ表示時のSTORK(ストーク)がまさにその方法を取っています。「右矢印」が点滅しているので、スクロールできるんだなと気づいてもらいやすいはずです。

まとめ

JavaScriptならできると思うんですが、知見がないので今回は断念。早くCSSだけでできるようにならないかと祈ってます(他力本願)

僕と同じように悩んでいる方に参考にしていただければ嬉しいです!そして、良い解決方法を知っている方がいれば、ご教示ください〜(涙)

 - WordPress・カスタマイズ

この記事が気に入ったらいいね!しよう

最新情報をお届けします