【コピペで30秒!!】超簡単!マウスでフリックをレスポンシブ対応でお手軽実装!

マウスでフリックをしたい!

マウスでのフリックはライブラリを使用したりとか、ちょっと難しい部分もあるので敬遠しがちですが、

html css jsの3ファイルにコピペするだけで簡単に実装できます。

まずはhtmlファイルからですが、構成は上記のようになるので使う要素は2つだけです。

下記をhtml css jsファイルにコピペで実装可能

htmlファイル

cssファイル

スクロールに関してはcssで制御できるのでoverflow:scroll;でスクロール実装しましょう。

.innerの横幅を指定することで.wrapからはみ出た部分をスクロールできます。

あとは問題のフリックです。特に難しいことは考えずコピペして下さい。

jsファイルにコピペ

これでマウスでのフリックが可能になります。

ぜひ試してみて下さい。

投稿者:気まぐれWEBLOG管理人