fullpage.js изменить направление прокрутки на прокрутке

Question

Я использую fullpage.js для создания wp-сайта, интересно, возможно ли изменить направление прокрутки, когда пользователь доберется до определенной страницы.

Чтобы лучше объяснить, давайте использовать этот этот пример: http://alvarotrigo.com/fullPage/examples/navigationV.html

Возможно ли направление прокрутки, чтобы изменить горизонтальное, когда вы посещаете second slide?

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

Возможно ли это с fullpage.js или мне нужно перейти на другой скрипт?

Answer 1

Хорошо, вот основной метод:

1. Когда вы попадаете на страницу, которая нуждается в горизонтально прокручивать, добавьте mousewheel слушателя, что:
2. Включает события прокрутки в левый или правый слайд изменения и
3. Предотвращает по умолчанию для MouseWheel если:
   • Последний слайд и прокрутите вниз или
   • Первый слайд и прокрутка вверх
4. Отключить слушателя при вводе другого слайда.

Существует также некоторый код, который предотвращает появление вещей во время загрузки слайдов.

var currentSlide = 0; 
var loaded = false; 
$('#fullpage').fullpage({ 
    navigation: true, 
    navigationTooltips: ['First section', 'Second section', 'Third section'], 
    sectionsColor: ['#f1c40f', '#e67e22', '#c0392b'], 
    loopHorizontal: false, 
    afterLoad: function (anchorLink, index){ 
     loaded = true; 
    }, 
    afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){ 
     currentSlide = slideIndex; 
     loaded = true; 
    }, 
    onLeave: function(index, nextIndex, direction) { 
     loaded = false; 
     if (nextIndex == 2) { 
      $('#fullpage').on("mousewheel",function(e){ 
       if(loaded){ 
        loaded = false; 
        var delta = e.originalEvent.deltaY; 
        console.log(delta); 

        if(delta>0){ //down 
         if(currentSlide===2){//if last slide 
          $('#fullpage').off("mousewheel"); 
         }else{ 
          $.fn.fullpage.moveSlideRight(); 
          e.preventDefault(); 
          e.stopPropagation(); 
         } 
        }else{ //up 
         if(currentSlide===0){//if first slide 
          $('#fullpage').off("mousewheel"); 
         }else{ 
          $.fn.fullpage.moveSlideLeft(); 
          e.preventDefault(); 
          e.stopPropagation(); 
         } 
        } 
       }else{ //slide still loading, don't scroll 
        e.preventDefault(); 
        e.stopPropagation(); 
       } 
      }); 
     } 
    } 
}); 

JSFiddle

Это работает на Chrome. Я не уверен, насколько кросс-браузер имеет бит e.originalEvent.deltaY. Вы можете заменить обработчик колесика мыши на this plugin, чтобы он был правильно перекрестным.

---

Вот JSFiddle with jquery.mousewheel для полностью кроссплатформенного решения.