0

I attempted to build a horizontal page layout - my first one. I built it to work with scrolling up and down.

See here:

$(function() {
    var lastPos = 0;
    
     $(window).scroll(function() {
        var currPos = $(document).scrollLeft();
    
        if (lastPos < currPos) {
            console.log('scroll right');
        } 
        if (lastPos > currPos) 
        {
            console.log('scroll left');
        }
    
        lastPos = currPos;
    });
});
.scroll_outer-wrapper {
  width: 100vh;
  height: 100vw;
  transform: rotate(-90deg) translateX(-100vh);
  transform-origin: top left;
  /* I have to comment these two lines in order for the left and right scroll to work
     HOWEVER, the up and down scroll won't work.

     If I uncommend these two lines, the up and down scroll will work as expected, but the left and right scroll won't work anymore.
  */
  overflow-y: scroll;
  overflow-x: hidden;
  position: absolute;
}
.scroll_wrapper {
  display: flex;
  flex-direction: row;
  width: 400vw;
  transform: rotate(90deg) translateY(-100vh);
  transform-origin: top left;
  transition: transform 0.5s ease;
}
.scroll_section {
  width: 100vw;
  height: 100vh;
}
.scroll_section.one {
  background: black;
  color: white;
}
.scroll_section.two {
  background: white;
  color: black;
}
.scroll_section.three {
  background: black;
  color: white;
}
.scroll_section.four {
  background: pink;
  color: black;
}

#scrollBtn {
  position: absolute;
  bottom: 20px;
  right: 20px;
  background-color: darkblue;
  color: white;
  border: none;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  text-transform: uppercase;
  font-size: 12px;
  line-height: 20px;
  cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="scroll_outer-wrapper">
    <div class="scroll_wrapper">
        <section class="scroll_section one"><h2>section 1</h2></section>
        <section class="scroll_section two"><h2>section 2</h2></section>
        <section class="scroll_section three"><h2>section 3</h2></section>
        <section class="scroll_section four"><h2>section 4</h2></section>
    </div>
</div>

What I didn't take into consideration, and it was a newbie mistake, was that I might have to also add the feature of scrolling from left to right as well as being able to scroll from top to bottom.

Right now I'm pretty advanced with the project and changing the whole structure would be really troublesome, so I come to you with my last hope to salvage this project structure while also implementing this feature...

TLDR; How to make a left to right & top to bottom scroll behave the same way (horizontal scroll) ?

Here is my code example.

ikos23
  • 4,879
  • 10
  • 41
  • 60
Aerra
  • 72
  • 2
  • 19
  • The question is not entirely clear. What does it mean - "the same as top-down"? Can you say what exactly you want ?! – s.kuznetsov Jul 28 '20 at 10:02
  • @sergeykuznetsov Please notice the behaviour of the page [here](https://jsfiddle.net/aerra/0gm82aw1/54/) when you scroll from top to down with the mousewheel. The page scrolls horizontally. I want the same scroll behaviour when the user scrolls from left to right (this can be achieved either with the laptop touchpad or with the apple mouse). I cannot explain it any better than this. – Aerra Jul 28 '20 at 10:05
  • Now understood the problem )) – s.kuznetsov Jul 28 '20 at 10:10
  • do you need scrolling of an internal scrollbar or an external one? – s.kuznetsov Jul 28 '20 at 10:19
  • @sergeykuznetsov I'm sorry, I'm not exactly sure what you mean. The div with the class `scroll_outer-wrapper` contains the sections I am interested in scrolling horizontally, if that's of any help? This `scroll_outer-wrapper` is essentially what's getting scrolled, not the `body`. – Aerra Jul 28 '20 at 10:22
  • 1
    Maybe this will help: https://stackoverflow.com/a/62591046. Look at the **UPDATE** – myfunkyside Jul 30 '20 at 05:12

0 Answers0