横スクロール可能なエリアであらかじめ決まった幅だけスクロールさせておきたい時のjQuery

例えば横スクロールできるエリアに各ページへリンクするサムネイルを並べてナビゲーションにするときってありますよね、あったんです。

横幅のあるウインドウでサイトを見ていれば良いけど、スマートフォンなどで見た時はスワイプで横スクロールさせたいとか、そういう時。

その時に特定のサムネイルはスクロールエリアの中央に持ってきて表示させたいケースがありました。

horizon-scroll-centering01

つまり、現在見ているページのサムネイルは中央配置にしたい時など、その横スクロール可能エリアをあらかじめ決まった数値でスクロールさせてやれば良いわけです。

もちろん最初や最後の隅っこにあるサムネイルは、それ以上スクロールしようがなく中央配置できないので、画面端でも最初に表示されていればOKとします。

HTMLは次のコードようなものを想定。

スマホ表示時のCSSは次のように。下記のコードはscssファイルでの記述になります。

最後にjQueryをこんな風に書きました。

横スクロールさせて真ん中まで持ってきたいli要素に.currentなどのクラスを与え、そのli要素が何番目かを調べてその分だけ横スクロールをさせています。

これでページを表示させた時にli.currentが真ん中に配置されるはずです。

と、ここまで書いていてCodePen載せたほうがわかりやすいな、と思ったので後で時間があるときにCodePen貼り付けておきます。

以上、横スクロール可能なエリアであらかじめ決まった幅だけスクロールさせておきたい時のjQueryの書き方でした。

アイドットデザインのブログはWeb業界の話題に限らず幅広いビジネストピックについて書いています。
よろしければFacebookページのフォローをどうぞ!ビジネスに役立つ情報をお届けします!

福岡のホームページ制作・SEO対策はアイドットデザインまでご相談ください!
インターネット集客やWebマーケティングのご相談も承ります。

follow us in feedly

Facebookページに「いいね!」して更新情報をチェック!

« »