How to Horizontal Scroll When Scrolling Vertical

How to Horizontal Scroll when scrolling vertical?

Here is what you need:

Example: http://css-tricks.com/examples/HorzScrolling/

Code: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

$(function() {
  $("body").mousewheel(function(event, delta) {
  this.scrollLeft -= (delta * 30);
  event.preventDefault();
  });
})

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js?ver=1.3.2'></script>
<script type='text/javascript' src='/js/jquery.mousewheel.min.js'></script>

One More Example: http://jsfiddle.net/ye259/4/

Don't allow horizontal scroll when scrolling vertically (and vice versa)

Try this

HTML
<div
  class="cu-dashboard-table__scroll-vertical"
>
  <div
    class="cu-dashboard-table__scroll-horizontal"
  >
    <!-- Scroll content here -->
  </div>
</div>

CSS
&__scroll {
  &-horizontal {
    overflow-x: auto;
    width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  &-vertical {
    overflow-y: auto;
    height: 100%;
    -webkit-overflow-scrolling: touch;
  }
}

Instead of using one div for scrolling, why dont you use two? Have one for X and one for Y

Use Vertical Scrollbar to Horizontal Scroll Content

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>

Horizontal scroll on parent, vertical scroll on child

You just need to modify class .one with:

  /* ADDED */
  min-width: 400px;
  max-width: 400px;
  height:100%;

The width that you set in text should be set in the parent. And you need to set the height to 100% (instead of 300px), otherwise you ever see the end of your scroll block.

.container {
  width: 300px;
  height: 200px;
  border: 2px solid;
  display: flex;
  overflow-x: scroll;
  overflow-y: hidden;
  flex-direction: row;
}

.one {
  width:100%;
  height: 300px;
  overflow-x: hidden;
  overflow-y: scroll;
  position: relative;
  border: 2px red solid;
  /* ADDED */
  min-width: 400px;
  max-width: 400px;
  height:100%;
}

.text {
  width: 400px;
}

<div class="container">
  <div class="one">
    <div class="text">
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.
            Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.
            Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.
            Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.
            Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.
            Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here. Some text here. Some text here. Some text here. Some
      text here. Some text here. Some text here. Some text here. Some text here.
      Some text here. Some text here. Some text here. Some text here. Some text
      here. Some text here.
      
    </div>
  </div>
</div>

Change from vertical scroll to horizontal when section reached

I asked that a while ago and no one answered my question, so I guess opting for a library like scrollmagic is the best solution.

for reference purpose I'm pasting these exemples from codepen:

exemple1

$(function () { // wait for document ready
  
  var controller = new ScrollMagic.Controller();

  var horizontalSlide = new TimelineMax()
  // animate panels
  .to("#js-slideContainer", 1,   {x: "-20%"})   
  .to("#js-slideContainer", 1,   {x: "-40%"})
  .to("#js-slideContainer", 1,   {x: "-60%"})
  .to("#js-slideContainer", 1,   {x: "-80%"})

  // create scene to pin and link animation
  new ScrollMagic.Scene({
    triggerElement: "#js-wrapper",
    triggerHook: "onLeave",
    duration: "400%"
  })
    .setPin("#js-wrapper")
    .setTween(horizontalSlide)
    //.addIndicators() // add indicators (requires plugin)
    .addTo(controller);
  
  
  
});

exemple2

var controller = new ScrollMagic.Controller();

var scrollHorizontal = new TimelineLite()
  scrollHorizontal.to("#scrollHorizontal", 1, {x:'-100%'})

var horizontalScroll = new ScrollMagic.Scene({
      triggerElement: "#scrollHorizontal",
      triggerHook: 'onLeave',
      duration: 3000
    }).setPin("#scrollHorizontal").setTween(scrollHorizontal).addTo(controller);

Swift: Vertical scroll within horizontal scroll within vertical scroll

I struggled with this for awhile. I came across this and it has worked very well.

https://github.com/OfTheWolf/TwitterProfile

Changing vertical scroll to horizontal

Try this:
You need to add a script reference to jquery and to the mouse wheel plugin.
And then use this JS:

$(function() {
   $("body").mousewheel(function(evt, chg) {
      this.scrollLeft -= (chg * 50); //need a value to speed up the change
      evt.preventDefault();
   });
});

Script References:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/js/jquery.mousewheel.js"></script>

you can directly use the first one, jquery script, as is because it is a public repository, but the second, the mousewheel.js will require you to save the .js file somewhere on your server and provide a link to it (similar to how you provide links for images in the src attribute).

Plugin: https://github.com/brandonaaron/jquery-mousewheel

Reference: http://css-tricks.com/snippets/jquery/horz-scroll-with-mouse-wheel/

---

Related Topics