Barba.js + колесико мыши + TweenMax. Не могу понять почему не работает прокрутка страницы
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
Спасибо всем за сотрудничество