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