Barba.js + колесико мыши + TweenMax.Я не могу понять, почему не работает прокрутка страницы - PullRequest
0 голосов
/ 24 ноября 2018

545/5000 Я нахожусь в такой ситуации, когда больше не могу думать.Мне нужна рука !!!Я использую колесико мыши вместе с tweenmax для прокрутки.На главной странице прокрутка горизонтальная, а на других страницах прокрутка вертикальная.Все работает нормально, но, очевидно, в мобильном телефоне и особенно в мобильном телефоне huawei не работает прокрутка.Я хотел представить barba.js для переноса страниц.Но работает только горизонтальная прокрутка.Извините за мой плохой английский

Очевидно, я знаю, что у мобильных телефонов нет руля.Разве вы не должны автоматически принимать жест?

/*
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
			});

	});

});

Для barba.js я использовал переход с непрозрачностью

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() {

Только домашняя страница, у меня есть этот код

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

Спасибо всем за сотрудничество

...