JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div id="wrap">
    <div id="content">Entertainment Everywhere.
    </div>
</div>http://gesturecons.com/

CSS

#content { width: 2047px; height: 395px; background: url(http://farm1.static.flickr.com/166/390115705_395e9888e5_o.jpg); overflow: hidden; cursor: -moz-grab; }
#wrap{
    width:100%;

 overflow:hidden;   
}

JavaScript

$(document).ready(function(){
    
    $('#wrap').mousedown(function(event) {
            $(this)
                .data('down', true)
                .data('x', event.clientX)
                .data('scrollLeft', this.scrollLeft);
            return false;
        })
        .mouseup(function (event) {
            $(this).stop().data('down', false);
        })
        .mousemove(function (event) {
            if ($(this).data('down')) {
                this.scrollLeft = $(this).data('scrollLeft') + $(this).data('x') - event.clientX;
            }
        })
        .mousewheel(function (event, delta) {
            this.scrollLeft -= (delta * 30);
        }).css({
            'overflow' : 'hidden'
        });
    
   
});

/*
//Temporarily disable mousewheel until animation over



$(window).bind('mousewheel', function(e, delta) {
if(delta == -1){    
    $('.alpha.wrapper').show();
    $('.titles .beta').hide();
    $('.splash').slideUp(800);
    $('.titles').animate({
        top: '495px'
    },800,function(){enable_scroll();});
    
    
    all about mouse and mousewheel 
    $('.testArea').hover(function() {
    trace('hover')
});
$('.testArea').click(function() {
    trace('click')
});
$('.testArea').dblclick(function() {
    trace('dblclick')
});
$('.testArea').mousedown(function() {
    trace('mousedown')
});
$('.testArea').mouseenter(function() {
    trace('mouseenter')
});
$('.testArea').mouseleave(function() {
    trace('mouseleave')
});
$('.testArea').mousemove(function() {
    trace('mousemove')
});
$('.testArea').mouseover(function() {
    trace('mouseover')
});
$('.testArea').mouseup(function() {
    trace('mouseup')
});
$('.testArea').mouseout(function() {
    trace('mouseout')
});
$('.testArea').mousewheel(function(event, delta) {
    var dir = delta > 0 ? 'Up' : 'Down';
    var vel = delta;
    trace('wheel:'+delta);
    return false; 
});
*/