Use Vertical Scrollbar to Horizontal Scroll Content

Question

So this may be considered a "hack" but I was wondering if & how it would be possible to make website content scroll horizontally using the vertical scroll bar(w/ mouse wheel).

Basically what this site does: http://en.momentomultimedia.com/

Currently on my site I have a horizontal scrollbar and use the mouse wheel to scroll.

This is what I currently use to make my site scroll horizontally via mousewheel (w/ overflow-x: scroll, overflow-y:hidden):

$(document).ready(function () {
$('#wrapper').on("mousewheel", function(e, delta) {
    this.scrollLeft -= (delta * 70);
    e.preventDefault();
});

});

Answer 1

The page you mentioned has a fake content div #falsocontenido with its height set to real content's width. It's hidden behind the real content which has it's position set to fixed so it doesn't scroll along with the fake div. After you scroll the page, the negative actual scroll value is taken and left of the real content is set to it. That's the whole logic.

Here is a demonstration

$(window).on('scroll', function() {
  $("#realcontent").css("left", -$(window).scrollTop());
});

#realcontent {
  background-color: #333;
  position: fixed;
  top: 5px;
  left: 0;
  width: 2000px;
  color: #fff;
  height: 100px
}

#fakecontent {
  height: 2000px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="realcontent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ullam a est maiores fugiat nesciunt, at ad. Tempore odio velit ipsam, laborum explicabo repudiandae aliquid nostrum qui dolorem obcaecati, autem expedita!</div>
<div id="fakecontent"></div>