0

545/5000 我已经到了无法思考的地步。我需要一只手！！！我将鼠标滚轮与 tweenmax 一起用于滚动。在主页中滚动是水平的，而在其他页面中滚动是垂直的。它可以正常工作，但显然在手机上，尤其是在华为手机上，滚动不起作用。我想介绍 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

谢谢大家的合作

4

0 回答 0