javascript - Use Vertical Scrollbar to Horizontal Scroll Content - Stack Overflow

admin管理员组

文章数量:1240606

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

Share Improve this question Follow asked Dec 25, 2017 at 0:17 MrMachoman86MrMachoman86 18511 gold badge33 silver badges1111 bronze badges 3

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 14

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>

本文标签： javascriptUse Vertical Scrollbar to Horizontal Scroll ContentStack Overflow