ホームページ制作・SEO対策 福岡のアイドットデザイン。Webマーケティングのご相談も承ります。

お問い合わせ・ご相談はコチラ

blog

ブログ

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

| カテゴリー : JavaScript

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

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

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

horizon-scroll-centering01

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

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

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

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

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

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

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

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

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

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

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

お気軽にお問い合わせください!

お見積りやご相談は、メール/お電話にてお気軽にご連絡ください。専属の担当者が丁寧にご対応いたします。