545/5000 我处于无法再思考的地步。我需要一只手! 我将mousewheel和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
谢谢大家的合作