CODEWITHSUNDEEP
javascriptjqueryhtmlcss
MrMachoman86
MrMachoman86

Reputation: 185

Use Vertical Scrollbar to Horizontal Scroll Content

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();
});

});

Upvotes: 10

Views: 10224

Answers (1)

valek
valek

Reputation: 1376

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>

Upvotes: 14

Related Questions