Jquery horizontal scroll temporary unbind

Attempting to unbind the horizontal scroll preventing default action, so that when a box is made big & tall, the user can scroll up and down the page rather than left and right.

by mrigess

HTML

<script src="http://isotope.metafizzy.co/jquery.isotope.min.js"></script>
<script src="https://raw.github.com/brandonaaron/jquery-mousewheel/master/jquery.mousewheel.js"></script>
<script src="http://flesler-plugins.googlecode.com/files/jquery.scrollTo-1.4.2-min.js"></script>
<div id="makeMeScrollable">
<div id="container">
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
  </div>
  <div class="item">
    <div class="item-content"></div>
 ...

CSS

.item {
  width: 50px;
  height: 50px;
  margin: 5px;
  float: left;
}

.item.big {
  width: 170px;
  height: 1000px;
}

.item-content {
  width: 50px;
  height: 50px;
  background: blue;
  opacity: 0.5;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
          transition-duration: 0.8s;

}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
          transition-property:         transform, opacity;
}


#makeMeScrollable {
    width:500px;
    height:400px
    position: relative;
    margin: 0;
    overflow: hidden;
}

#container {
    height: 120px;
    margin: 0;
}

JavaScript

$('#makeMeScrollable').bind('mousewheel', function(event, delta) {
    this.scrollLeft -= (delta * 150);
    event.preventDefault();
});

$(function() {


    var $container = $('#container');

    $container.isotope({
        itemSelector: '.item',
        itemPositionDataEnabled: true,
        layoutMode: 'masonryHorizontal',
        masonryHorizontal: {
            rowHeight: 60
        }
    });

    $('.item').click(function() {
        var $this = $(this),
            tileStyle = $this.hasClass('big') ? {
                width: 50,
                height: 50
            } : {
                width: 170,
                height: 1000
            };
        $this.toggleClass('big');

        $this.find('.item-content').stop().animate(tileStyle);

        $container.isotope('reLayout');

        setTimeout(function() {
            if ($this.hasClass('big')) {
                itemPosition = $this.data('isotope-item-position');
                $this.find('.item-content').html(itemPosition.x);
                $('#makeMeScrollable').scrollTo(itemPosition.x + 'px', 800, {
                    axis: 'x'
                });
                var newheight = $('.big').height();
                $container.height(newheight);
                $('#makeMeScrollable').unbind('mousewheel', function(event, delta) {});
            }
            else {
                $container.height('120px');
                $container.isotope('reLayout');
            }
        }, 0);

    });



});