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: /

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

});

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./

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

});

• javascript
• jquery
• html
• css

• This is what I use. – user3483203 Commented Dec 25, 2017 at 0:21
• This is what I'm using. But it depends on the horizontal scrollbar. I would like to use the vertical scrollbar, to scroll horizontally. It's somewhat hacky. – MrMachoman86 Commented Dec 25, 2017 at 0:24
• Their page is actually in a fixed position overlay while they make the body the height of the width of the contents of the fixed page. So when you scroll the page stays in the same place because it's fixed. On scroll they then just set left to the amount of px scrolled. Either method is a hack and has its own drawbacks. – René Commented Dec 25, 2017 at 0:28

1 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./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>