I'm working on a website that is horizontal and I need to make horizontal scrolling when user scroll down. Any ideas how to make that with javascript?

Here is fiddle: /

Here is code:

body {
  margin: 0;
  height: 100vh;
}

* {
  box-sizing: border-box;
}

.container {
  overflow-x: auto;
  white-space: nowrap;
}

.container>div {
  background: red;
  display: inline-block;
  width: 100vw;
  height: 100vh;
  margin-left: -4px;
}

.container>div:first-child {
  margin-left: 0;
}

.container::-webkit-scrollbar {
  display: none;
}

.container>div:nth-child(even) {
  background: blue;
}

<div class="container">
  <div>scroll left</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
</div>

I'm working on a website that is horizontal and I need to make horizontal scrolling when user scroll down. Any ideas how to make that with javascript?

Here is fiddle: https://jsfiddle/erqbtL23/

Here is code:

body {
  margin: 0;
  height: 100vh;
}

* {
  box-sizing: border-box;
}

.container {
  overflow-x: auto;
  white-space: nowrap;
}

.container>div {
  background: red;
  display: inline-block;
  width: 100vw;
  height: 100vh;
  margin-left: -4px;
}

.container>div:first-child {
  margin-left: 0;
}

.container::-webkit-scrollbar {
  display: none;
}

.container>div:nth-child(even) {
  background: blue;
}

<div class="container">
  <div>scroll left</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
</div>

• javascript
• html
• css

• 1 Have you tried anything yet? Attaching to the wheel event and translating a vertical scroll to a horizontal scroll should be one possibility – MofX Commented Jul 26, 2019 at 9:38
• 1 Go have a look at css-tricks./snippets/jquery/horz-scroll-with-mouse-wheel Also keep in mind that there are much touch devices so when they swipe up it's kinda weird if the swipe right is going to be activated unless you got another solution for that. – Nick Van Loocke Commented Jul 26, 2019 at 9:41

4 Answers 4

You can do it with just CSS, by rotating the container so that the bottom bees the right and then rotating each item so it is displayed correctly.

.h-scroll {
  width: 100px;
  height: 300px;
  overflow-y: auto;
  overflow-x: hidden;
  transform-origin: right top;
  transform: rotate(-90deg) translateY(-100px);
}

.h-scroll > div {
  width: 100px;
  height: 100px;
  transform: rotate(90deg);
  transform-origin: right top;
}

<div class="h-scroll">
  <div>item 1</div>
  <div>item 2</div>
  <div>item 3</div>
  <div>item 4</div>
  <div>item 5</div>
  <div>item 6</div>
  <div>item 7</div>
  <div>item 8</div>
</div>

You could add a scroll event listener that would block the original behaviour with event.preventDefault() and add your own left scroll logic:

window.document.addEventListener("scroll", ({preventDefault}) => {
    preventDefault();
    window.scrollTo(/* you need some logic to know where to scroll to */) 
});

Possible solution for you:

$('.container').bind('DOMMouseScroll', function(e){
     if(e.originalEvent.detail > 0) {
         //scroll down
         $('.container').animate({
    scrollLeft: "+=500px"
  }, "slow");
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

 //IE, Opera, Safari
 $('.container').bind('mousewheel', function(e){
     if(e.originalEvent.wheelDelta < 0) {
         //scroll down
           $('.container').animate({
    scrollLeft: "+=500px"
  }, "slow");
         console.log('Down');
     }else {
         //scroll up
         console.log('Up');
     }

     //prevent page fom scrolling
     return false;
 });

.container
{
width:200px;
overflow:hidden;
border:1px solid black;
}

<script src="https://cdnjs.cloudflare./ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div>scroll left</div>
  <div>loremloremloremloremloremloremloremloremremloremloremloremremloremloremlorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
  <div>lorem</div>
</div>

I have the Same Requirement in my Project.

UPDATE 1: Working Link included in the end.

Hope this might help you: It'll work with mouse Scroll Bar. Scrolling Horizontally when user scroll Vertically.

HTML Code:

<div class="container element_size">
    <div>scroll left</div>
    <div>lorem</div>
    <div>lorem</div>
    <div>lorem</div>
    <div>lorem</div>
    <div>lorem</div>
    <div>lorem</div>
    <div>lorem</div>
    <div>lorem</div>
    <div>lorem</div>
    <div>lorem</div>
    <div>lorem</div>
</div>

CSS Code:

$finalHeight: 250px;
$finalWidth: 3 * $finalHeight;
$scrollBarHeight: 1px;

::-webkit-scrollbar {
  width: $scrollBarHeight;
  height: $scrollBarHeight;
}

::-webkit-scrollbar-button {
  width: $scrollBarHeight;
  height: $scrollBarHeight;
}

body {
  background: #111;
}

div {
  box-sizing: border-box;
}

.container {
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: calc(#{$finalHeight} + #{$scrollBarHeight});
  max-height: $finalWidth;
  margin: 0;
  padding-top: $scrollBarHeight;
  background: #abc;
  overflow-y: auto;
  overflow-x: hidden;
  transform: rotate(-90deg) translateY(-$finalHeight);
  transform-origin: right top;
  & > div {
    display: block;
    padding: 5px;
    background: #cab;
    transform: rotate(90deg);
    transform-origin: right top;
  }
}

.element_size {
  padding: $finalHeight 0 0 0;
  & > div {
    width: $finalHeight;
    height: $finalHeight;
    margin: 10px 0;
  }
}

Here is the working Code Pen Link: https://codepen.io/anon/pen/KOgGqL