Hola estoy teniendo un problema con un sitio Pagina web a la hora de verlo en mobile en un dispositivo con android. El problema surge cuando quiero scrollerar o deslizarme con el dedo y no me deja ver las siguientes paginas. En Ios funciona todo bien, pero el problema es con android y con chrome. el javascript que use es el siguiente:
var esperando = false;
function irSeccion(elem) {
if (esperando){
return
}
if (location.pathname.replace(/^\//,'') == elem.pathname.replace(/^\//,'') && location.hostname == elem.hostname) {
var target = $(elem.hash);
target = target.length ? target : $('[name=' + elem.hash.slice(1) +']');
if (target.length) {
$('html, body').animate({
scrollTop: target.offset().top,
},{
start:function(){esperando = true},
complete:function(){ esperando = false},
duration:350
});
return false;
}
}
}
var $document = $(document),
$sections = $('section'),
$bullets = $('#Bullets > li'),
$activeBullet = $bullets.first();
/** EVENTOS DEL MOUSE */
function onMouseWheel(dir) {
if (esperando){return}
if( dir > 0 ) {
$document.trigger('scrollDown');
} else {
$document.trigger('scrollUp');
}
}
// firefox
window.addEventListener('DOMMouseScroll', function(e){
onMouseWheel(e.detail);
});
// google
$document.on('mousewheel', function(e){
onMouseWheel(e.originalEvent.deltaY);
})
.on('scrollDown', function(){
if (esperando){return}
var $next = $activeBullet.next();
if(!$next.length) {return}
$activeBullet = !!$next.length ? $next : $bullets.first();
$activeBullet.trigger('active');
})
.on('scrollUp', function(){
var $prev = $activeBullet.prev();
if(!$prev.length) {return}
$activeBullet = !!$prev.length ? $prev : $bullets.last();
$activeBullet.trigger('active');
});
/** EVENTOS DE LOS BULLETS */
$bullets.on('active', function(e){
$bullets.removeClass('active');
var $li = $(this).addClass('active');
$sections.filter('.' + $li.attr('data-section')).trigger('active');
irSeccion($(this).find('a').get(0));
})
$bullets.find('> a').on('click', function(){
console.log('click')
$(this).parent().trigger('active');
});
/** EVENTOS DE LAS SECCIONES */
$sections.on('active', function(){
$sections.removeClass('active');
var $section = $(this).addClass('active');
/* Alguna acción más */
});
$activeBullet.trigger('active');
$('.awesome-tooltip').tooltip({
placement: 'left'
});
$('body').scrollspy({
target: '#mainnav',
offset: 002
});
$('a[href*=#]:not([href=#])').click(function() {irSeccion(this)});
/*CAROUSEL DE INDEX*/
/*Carousel index */
(function () {
var sliderImages = document.querySelectorAll('.image'),
arrowLeft = document.querySelector('#left-arrow'),
arrowRight = document.querySelector('#right-arrow'),
currentImg = 0;
function initSlider() {
resetSlider();
sliderImages[0].style.display = 'block';
}
function resetSlider() {
for (var i = 0; i < sliderImages.length; i++) {
sliderImages[i].style.display = 'none';
}
}
function toLeft() {
resetSlider();
sliderImages[currentImg - 1].style.display = 'block';
currentImg--;
}
function toRight() {
resetSlider();
sliderImages[currentImg + 1].style.display = 'block';
currentImg++;
}
function trigger(element,type){
var event;
if (document.createEvent) {
event = document.createEvent("HTMLEvents");
event.initEvent(type, true, true);
} else {
event = document.createEventObject();
event.eventType = type;
}
event.eventName = type;
if (document.createEvent) {
element.dispatchEvent(event);
} else {
element.fireEvent("on" + event.eventType, event);
}
}
//Simula un click en la flecha de la derecha
trigger(arrowRight,'click');
//Hace movimiento automatico cada 3 sg
setInterval(function(){trigger(arrowRight,'click');},3000);
arrowLeft.addEventListener('click', function () {
if (currentImg === 0) {
currentImg = sliderImages.length;
}
toLeft();
});
arrowRight.addEventListener('click', function () {
if (currentImg === sliderImages.length - 1) {
currentImg = -1;
}
toRight();
});
initSlider();
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
lo que quise hacer es bloquear los paginadores que están en comienzo del sitio para que en la versión mobile se pueda desplazar sencillamente si apretar cada punto.
display:none;
en su lugar?