Barba.js + mousewheel + TweenMax. I can not understand why the page scroll does not work

518 Views Asked by At

545/5000 I'm at a point where I can not think anymore. I need a hand !!! I use mousewheel together with tweenmax for the scroll. In the home page the scroll is horizontal while in the other pages the scroll is vertical. It works all right, but obviously in the mobile and especially in the huawei mobile phone does not work the scroll. I wanted to introduce barba.js for page transference. But only horizontal scroll works. Sorry for my bad English

Obviously I know that cell phones do not have a wheel. Should not you automatically take the gesture?

/*
Srolling Top index detail work
*/
$(function(){

 var $window = $(window);  //Window object

 var scrollTime = 1.2;   //Scroll time
 var scrollDistance = 300;  //Distance. Use smaller value for shorter scroll and greater value for longer scroll 170

 $window.on("mousewheel DOMMouseScroll", function(event){

  event.preventDefault();

  var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
  var scrollTop = $window.scrollTop();
  var finalScroll = scrollTop - parseInt(delta*scrollDistance);

  TweenMax.to($window, scrollTime, {
   scrollTo : { y: finalScroll, autoKill:true },
    ease: Power1.easeOut, //For more easing functions see https://api.greensock.com/js/com/greensock/easing/package-detail.html
    autoKill: true,
    overwrite: 5
   });

 });

});

For barba.js I used the transition with opacity

var FadeTransition = Barba.BaseTransition.extend({
  start: function() {
    /**
     * This function is automatically called as soon the Transition starts
     * this.newContainerLoading is a Promise for the loading of the new container
     * (Barba.js also comes with an handy Promise polyfill!)
     */

    // As soon the loading is finished and the old page is faded out, let's fade the new page
    Promise
      .all([this.newContainerLoading, this.fadeOut()])
      .then(this.fadeIn.bind(this));
  },

  fadeOut: function() {
    /**
     * this.oldContainer is the HTMLElement of the old Container
     */

    return $(this.oldContainer).animate({ opacity: 0 }).promise();
  },

  fadeIn: function() {
    /**
     * this.newContainer is the HTMLElement of the new Container
     * At this stage newContainer is on the DOM (inside our #barba-container and with visibility: hidden)
     * Please note, newContainer is available just after newContainerLoading is resolved!
     */
    $(window).scrollTop(0); // scroll to top here

    var _this = this;
    var $el = $(this.newContainer);

    $(this.oldContainer).hide();

    $el.css({
      visibility : 'visible',
      opacity : 0
    });

    $el.animate({ opacity: 1 }, 400, function() {
      /**
       * Do not forget to call .done() as soon your transition is finished!
       * .done() will automatically remove from the DOM the old Container
       */

      _this.done();
    });
  }
});

/**
 * Next step, you have to tell Barba to use the new Transition
 */

Barba.Pjax.getTransition = function() {

Only home page i have this code

function myFunction(x) {
  if (x.matches) { // If media query matches
    $(document.body).on('touchmove', onScroll); // for mobile
    $(window).on('scroll', onScroll);

    // callback
    function onScroll() {
      if ($(window).scrollTop() + window.innerHeight >= document.body.scrollHeight) {
        track_page++;
        load_contents(track_page);
      }
    }

  } else {
    $(function() {

      var $window = $(window); //Window object

      var scrollTime = 1.2; //Scroll time
      var scrollDistance = 300; //Distance. Use smaller value for shorter scroll and greater value for longer scroll 170

      $window.on("mousewheel DOMMouseScroll", function(event) {

        event.preventDefault();

        var delta = event.originalEvent.wheelDelta / 120 || -event.originalEvent.detail / 3;
        var scrollLeft = $window.scrollLeft();
        var finalScroll = scrollLeft - parseInt(delta * scrollDistance);

        TweenMax.to($window, scrollTime, {
          scrollTo: {
            x: finalScroll,
            autoKill: true
          },
          ease: Power1.easeOut, //For more easing functions see https://api.greensock.com/js/com/greensock/easing/package-detail.html
          autoKill: true,
          overwrite: 5
        });
      });
    });
  }
}

var x = window.matchMedia("(max-width: 700px)")
myFunction(x) // Call listener function at run time
x.addListener(myFunction) // Attach listener function on state changes

Thank you all for your cooperation

0

There are 0 best solutions below