さすらいのWeb制作家、MAKOCHINがつづるブログサイト。
Web制作に関する知識を備忘録的に書いているだけのサイトです。
ほとんど自分で見るためだけに書いているような内容なので読みやすくはなっていませんが、Web制作のお役に立てれば幸いです。
ご興味のある方はどうぞ。

【JQuery】子要素の横位置を取得して、親要素の横スクロールの位置を画面の中央に子要素が来るようにする

Pocket
LINEで送る

スマホなどでタブ切り替えがあった場合に、タブ自体を横スクロールで表示させたりする。
そういう場合にページが読み込まれた際にアクティブなタブ要素が画面中央に表示されるようにする方法です。

var sideScroll = $('.box .chirdren.active').offset();
var windowWidth = $(window).width();
var activeWidth = $('.box .chirdren.active').innerWidth();

$('.box').scrollLeft(sideScroll.left - (windowWidth / 2) + (activeWidth / 2));

カテゴリー:JQuery, スクロール

コメントを残す

コメント内容