メモ：jQueryを使って横スクロールを実現する

こんばんは。ファガイです。

今回は、少しだけ書きます。jQueryを使って横スクロールを実現する方法です。

例えば、ulタグにliで画像等を横並びで出したいとかいう時に使える。

<div>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</div>

div{
    width: XXX;
    overflow: auto;
}
li {
    width: XXX;
    float: left;
}

;(function($)
{
    $(function(){
        li_width = $("ul li").outerWitdh(true);
        li_count = $("ul li").length;

        $("ul").width(li_width * li_count);
    });
})(jQuery);

こんな感じですかね。
今回、outerWidthが便利すぎた。outerWidthはborderとかmarginとかを合わせたwidthを返してくれます。これで結構楽になれました。