CODEWITHSUNDEEP
javascripthtmlcss
AntunCrnja
AntunCrnja

Reputation: 119

Scroll left if user scroll down ( horizontal scrolling )

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

Upvotes: 0

Views: 6991

Answers (4)

Anonymus
Anonymus

Reputation: 353

You can do it with just CSS, by rotating the container so that the bottom becomes 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>

Upvotes: 5

Vinod Bokde
Vinod Bokde

Reputation: 338

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

Upvotes: 0

Shivani Sonagara
Shivani Sonagara

Reputation: 1307

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

Upvotes: 0

Alexandre Senges
Alexandre Senges

Reputation: 1579

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 */) 
});

Upvotes: 1

Related Questions