Изменение направления прокрутки с вертикального на горизонтальное на той же странице

Question

Я пытаюсь создать одностраничный сайт, на котором изначально при прокрутке страница будет перемещаться по вертикали, затем она попадает в раздел ширины / высоты страницы внизу, где я хочу, чтобы направление прокрутки изменилось на горизонтальное.

Я использовал следующий код, чтобы изменить направление прокрутки на горизонтальное, когда оно достигает нижней части страницы:

$(window).scroll(function() {
 if($(window).scrollTop() + $(window).height() == $(document).height()) {
   $("body").css("overflow-x", "auto", "overflow-y", "hidden");
     $('html, body, *').mousewheel(function(e, delta) {
      this.scrollLeft -= (delta * 30);
      e.preventDefault();
    });
   } 
 });

Однако мне нужен метод, который также изменит направление отпрокрутка сверху вниз, а затем слева направо, справа налево и снизу вверх.Я относительно новичок в jQuery и не уверен, как лучше всего этого добиться.

Answer 1

Ключом к вашему решению является то, что вы хотите посмотреть, что осталось после прокрутки.Если это 0, то вы снова активируете вертикальную прокрутку.Событие колеса прокрутки происходит много раз за фактическую прокрутку, поэтому вам нужно выполнить сравнение по таймауту после завершения всех событий.

Для моего примера ниже я использовал несколько маленьких изображений для создания вертикальной высоты, затем добавил очень большое изображение для получения горизонтальной ширины.

Сначала мы включаем вертикальную прокрутку, затем, когда мы достигаемВнизу страницы мы включаем горизонтальную прокрутку.Во время горизонтальной прокрутки, если мы достигаем самой левой точки в скроллере, мы снова включаем вертикальную прокрутку.

scrollVert();
var scrollLeft=0;

function scrollVert() {
  $('html, body, *').off('mousewheel').mousewheel(function(e, delta) {
    this.scrollTop -= (delta * 40);
    e.preventDefault();
    setTimeout(function() {
      if ($(window).scrollTop() + $(window).height() == $(document).height())
        scrollHoriz();
    }, 0)

  });
}
function scrollHoriz() {
  $('html, body, *').off('mousewheel').mousewheel(function(e, delta) {
    this.scrollLeft -= (delta * 40);
    e.preventDefault();
    scrollLeft=this.scrollLeft
    setTimeout(function() {
      if (scrollLeft == 0) scrollVert();
    }, 0)
  });
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/jquery/jquery-mousewheel/master/jquery.mousewheel.js"></script>

<img src="http://i.imgur.com/jYxGsiT.jpg">  
<img src="http://i.imgur.com/esEVTYV.jpg">  
<img src="http://i.imgur.com/n55bFJm.jpg">