Horizontal Scroll when Scrolling Vertically?

Question

I know this topic has been asked a lot here but I can't find anything recent and as far as I am aware the later jQuery versions do not support these functions anymore.

I have a website which scrolls horizontally, it works great but only when I swipe my trackpad sideways rather than scrolling vertically. Does anyone know of an updated way of doing this?

Can provide more code if needed. Just wondering if anyone knows a general way of tackling this.

Here is an example of what I am looking for (the first pink section before it scrolls down): https://alvarotrigo.com/fullPage/extensions/scroll-horizontally.html#firstPage/2

Here is a basic setup of what I have at the moment, it will only scroll if scrolled sideways rather than vertical and sideways. https://codepen.io/caitlinmooneyx/pen/WVrggB

Heres what I've tried so far:

How to Horizontal Scroll when scrolling vertical?

And:

var scroller = {};
scroller.e = document.getElementById("wrapper");

if (scroller.e.addEventListener) {
    scroller.e.addEventListener("mousewheel", MouseWheelHandler, false);
    scroller.e.addEventListener("DOMMouseScroll", MouseWheelHandler, false);
} else scroller.e.attachEvent("onmousewheel", MouseWheelHandler);

function MouseWheelHandler(e) {

    // cross-browser wheel delta
    var e = window.event || e;
    var delta = -20 * (Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail))));

    var pst = $('#wrapper').scrollLeft() + delta;

    if (pst < 0) {
        pst = 0;
    } else if (pst > $('.card').width()) {
        pst = $('.card').width();
    }

    $('#wrapper').scrollLeft(pst);

    return false;
};

Answer 1

Well here is a smal exmaple i wrote without smoth effect.

you could use JQUI to have a smooth scroll etc.

Change it as you like, and let me know what you think

Not: this is only an example with mouseweel try to scroll verticly

var delta = -1;
var currentPlayer;


$(".container").bind("wheel",function(e){
var players = $(this).find(".player");
var y =e.originalEvent.wheelDeltaY;

function setDelta(scroll){
if (y>0 && 0 <= delta -1)
    delta--;
     else if (y<0 && delta +1 < players.length) 
     delta++;

currentPlayer = $(players[delta]);
  if (scroll){
// JQUI $(window).animate({ scrollTop: currentPlayer.offset().top}, 1000);
$(window).scrollTop(currentPlayer.offset().top)
}
}
if (!currentPlayer){
     setDelta();
}
// Current visiable page in the Section/player
var vItem = currentPlayer.find("div").filter(function(i,x){
return !$(x).is(":hidden")
});

if (y<0 && vItem.next().length>0){
        vItem.hide().next().show();
        }
    else if (y >= 0 && vItem.prev().length>0)
           vItem.hide().prev().show();
        else {
           /// scroll downor upp to the next Section
             setDelta(true);
       
        }
return false; // disable scroll 

});

.player{
width:100vw;
height:100vh;
background: red;
border:1px solid #CCC;
overflow:hidden;

}

.player:last{
background: blue;
}
.player>div:not(:first-child){
display:none;
}

.player> div{
float:left;
width:100%;
height:100%;
color:white;
}
.container {
  overflow:hidden;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="player">
<div>page1</div>
<div>page2</div>
<div>page3</div>
</div>

<div class="player" style="background: blue">
<div>page1</div>
<div>page2</div>
<div>page3</div>
</div>
</div>