こんにちは、福岡のホームページ制作シンス株式会社の越水です。

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

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

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

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

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

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

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

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

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

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

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

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

中小企業のホームページ制作やサイトリニューアルならシンス株式会社まで。