垂直滚动时水平滚动？

Question

我知道这个话题在这里被问了很多，但我找不到任何最近的东西，据我所知，后来的 jQuery 版本不再支持这些功能。

我有一个水平滚动的网站，它工作得很好，但只有当我横向滑动触控板而不是垂直滚动时。有谁知道这样做的更新方法？

如果需要，可以提供更多代码。只是想知道是否有人知道解决这个问题的一般方法。

这是我正在寻找的示例（向下滚动之前的第一个粉红色部分）： https://alvarotrigo.com/fullPage/extensions/scroll-horizontally.html#firstPage/2

这是我目前所拥有的基本设置，它只会在横向滚动而不是垂直和横向滚动时滚动。 https://codepen.io/caitlinmooneyx/pen/WVrggB

这是我迄今为止尝试过的：

How to Horizontal Scroll when scrolling vertical?

还有：

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

这是我写的一个没有平滑效果的小例子。

您可以使用JQUI 进行平滑滚动等。

随心所欲地改变它，让我知道你的想法

不是：这只是mouseweel 尝试垂直滚动的示例

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>