scroll horisontal

by oceog

HTML

<div id="parent">
    <div>other child</div>
    <div id="text">textextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextext
        textextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextext
        textextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextext
        textextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextext
        textextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextext
        textextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextext
        textextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextext
        textextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextext
        textextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextext
        textextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextext
        textextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextext
        textextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextext
        textextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextext
        textextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextext
        textextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextexttextextext
       ...

CSS

#text {
    width: 10000px;
}
#parent {
    width:300px;
    overflow-x: scroll;
}
#other {
    height: 1000px;
}
}

JavaScript

(function ($) {
    $.fn.Hscroll = function (speed,scroll) {
        scroll = scroll === undefined ? 1 : scroll;
        speed = speed === undefined ? 1 : speed;
        $parent = $(this);
        if ($parent.data('Hscroll') !== undefined) return $parent;
        $parent.data('Hscroll', 1);
        var pass = $('<div>').css({
            position: "fixed",
            top: "0",
            width: "3px",
            height: "3px",
                "margin-top": "-1px",
                "margin-left": "-1px",
            background: "black",
            opacity: "0",
                "overflow-x": "scroll",
                "z-index": "10000"
        });
        pass.append($('<div>').height(get_max_width($parent) / speed));

        $('body').append(pass);
        if (scroll !== 0) {
            $parent.css('overflow-x', "scroll");
        } else {
            $parent.css('overflow-x', "hidden");
        }

        pass.mousedown(function (e) {
            $this = $(this);
            $this.css('z-index', '-1000');
            $parent.trigger(e);
            $parent.mouseup(function (e) {
                $this.css('z-index', '1000');
            });
        });
        $parent.children().bind('mousemove', function (e, d) {
            pass.css('top', e.clientY);
            pass.css('left', e.clientX);
        });
        $(document).on('scroll',function (e) {            
            pass.css({
                'top': -10,
                'left': -10
            });
        });
        pass.scroll(function () {
            $parent.scrollLeft(pass.scrollTop() * speed);
        });

        $parent.scroll(function () {
            pass.scrollTop($parent.scrollLeft() / speed);
        });
    };

    function get_max_width(element) {
        return Math.max.apply(null, element.children().map(function (a) {
            return $(this).outerWidth()
        }));
    }
})(jQuery);
$('#parent').Hscroll(2);


//