jQuery ParallelScroller

なんかもう訳分からんことになってきたのでjQuery にしてまたドン詰まり

by ethertank

HTML

<!--div class="bar"><div class="pad"></div></div-->

<pre class="scroller">
Caramels chocolate bar gummies chocolate cake oat cake sesame snaps muffin gingerbread. Pie ice cream sesame snaps chupa chups wafer powder candy applicake. Tart applicake faworki. Donut chupa chups marshmallow candy canes. Dessert gummi bears bear claw ice cream cookie.
 Caramels oat cake faworki. Jelly beans tiramisu macaroon. Muffin candy applicake caramels toffee wafer. Jujubes icing dessert gingerbread muffin fruitcake chupa chups. Cookie jelly beans candy cotton candy.
</pre>

<pre class="scroller s2">
Caramels chocolate bar gummies chocolate cake oat cake sesame snaps muffin gingerbread.
</pre>

CSS

body { padding: 10px; }


pre{
    width: 200px;
    border: 10px solid red;
    padding: 3px;
    resize: both;
    margin: 20px 0;
    overflow: auto;
}

.s2{width: auto; }

JavaScript

$(function() {
    
    
    //17px
    
    $.fn.et_ParallelScroller = function(config) {
        
        function debug(THIS){
            console.log([
                THIS.attr("class"),
                "innerWidth : " + THIS.innerWidth()
            ]);
        }
        
        var defaults = {
            width: "90%",
            margin: "1em 0",
            borderWidth: "10px",
            borderColor: "red",
            borderStyle: "solid",
            padding: "0",
            overflow: "visible"
        };

        var resetStyle = {
            overflow: "auto", outline: "none", border: "none",
            padding: "4px", width: "auto",  margin: "0",
            boxShadow: "none"
        };
        
        var options = $.extend(defaults, config);
        
        $(this).wrap('<div class="wrapper"></div>');
        $(this).css(resetStyle);
        
        $(".wrapper").prepend('<div class="bar"><div class="pad">&nbsp;</div></div>');
        $(".wrapper").css(options);

        $(".pad").css("height", "0");
        $(".bar").css("overflow", "auto");
       
        function Event() {
            debug($(this));
            
            $(this).css(
                "width",
                $(this).children(".scroller")[0].clientWidth + "px"
            );

            $(this).children(".bar").children(".pad").css(
                "width",
                $(this).children(".scroller")[0].scrollWidth + "px"
            );
        }

        // 要素リサイズ時(mousemove で取ってる)
        $(".wrapper").each(function() { $(this).mousemove(Event); });
        
        // スクロールバー操作時
        $(".bar").each(function() {
            $(this).scroll(function() {
                $(this).parent().children(".scroller").scrollLeft($(this).scrollLeft());
            });
        });
        
        // スクロールバー操作時
        $(".scroller").each(function() {
            $(this).scroll(function() {
               ...