垂直滚动时水平滚动？

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>