Qualche tempo fa mi stavo occupando di rendere un sito web mobile-friendly e mi sono trovato di fronte alla necessità di gestire delle tabelle molto larghe. Purtroppo non era possibile pretendere che le tabelle fossero tutte quante di larghezza ridotta o con poche colonne, perciò era necessario usare l’overflow orizzontale con il CSS.
Oltre alle tabelle, ci sarebbero state anche delle formule visualizzate con Mathjax che — se molto lunghe — avrebbero “sfondato” la pagina. Ho avuto modo di accorgermi ben presto che la soluzione è leggermente meno semplice di quanto si possa pensare.
Nonostante le ultime versioni di Android e di iOS per iPhone/iPad supportino lo scorrimento di parti di pagina affette da overflow, le versioni vecchie di Android non permettono di scorrere correttamente con il dito, mentre quelle di iOS richiedono due dita e ciò è poco intuitivo.
Fortunatamente, ho trovato una soluzione interessante in Javascript sul blog di Chris Barr. Leggendo i commenti, ho anche scoperto con piacere che un lettore (Jeff) ne aveva fornito una versione Jquery, mentre un altro (Cormac) suggeriva l’utilizzo del metodo .live() per consentirne un corretto utilizzo anche su elementi caricati nel DOM in un momento successivo.
Ho deciso di unire i due approcci ed è venuto fuori il seguente risultato, che potete includere all’interno della pagina:
function isTouchDevice() {
try {
document.createEvent("TouchEvent");
return true;
}
catch(e) {
return false;
}
}
function touchScroll(selector) {
if (isTouchDevice()) {
var scrollStartPosY=0;
var scrollStartPosX=0;
$("body").delegate(selector, 'touchstart', function(e) {
scrollStartPosY=this.scrollTop+e.originalEvent.touches[0].pageY;
scrollStartPosX=this.scrollLeft+e.originalEvent.touches[0].pageX;
});
$("body").delegate(selector, 'touchmove', function(e) {
if ((this.scrollTop < this.scrollHeight-this.offsetHeight &&
this.scrollTop+e.originalEvent.touches[0].pageY < scrollStartPosY-5) || (this.scrollTop != 0 && this.scrollTop+e.originalEvent.touches[0].pageY > scrollStartPosY+5))
e.preventDefault();
if ((this.scrollLeft < this.scrollWidth-this.offsetWidth &&
this.scrollLeft+e.originalEvent.touches[0].pageX < scrollStartPosX-5) || (this.scrollLeft != 0 && this.scrollLeft+e.originalEvent.touches[0].pageX > scrollStartPosX+5))
e.preventDefault();
this.scrollTop=scrollStartPosY-e.originalEvent.touches[0].pageY;
this.scrollLeft=scrollStartPosX-e.originalEvent.touches[0].pageX;
});
}
}
La cosa interessante della soluzione proposta da Jeff (e che ho riutilizzato) è quella di permettere il corretto funzionamento dei link contenuti nell’elemento che scorre.
Come potete intuire dal codice, la prima funzione controlla se il dispositivo è dotato di touchscreen oppure no, mentre la seconda accetta un selettore Jquery e associa un evento che viene azionato quando l’utente scorre con il dito sopra gli elementi corrispondenti.
Per applicare lo scorrimento alle tabelle, è necessario racchiuderle con un contenitore (in questo caso un <div>) in modo da applicare l’overflow, che con le tabelle non funziona in modo convenzionale.
La funzione deve essere richiamata dentro a $(document).ready(), e può essere utilizzata così, tenendo presente il trucco per le tabelle:
$(document).ready(function() {
touchScroll(".MathJax_Display");
$("table").wrap('<div class="table-scroll"></div>');
$(".table-scroll").css('overflow', 'auto');
touchScroll(".table-scroll");
});
La prima chiamata a touchScroll() si occupa delle formule prodotte da MathJax, i cui elementi compaiono nel DOM in un momento successivo ma sono catturati ugualmente grazie all’uso di .delegate(). Le seguenti righe si occupano invece di racchiudere le tabelle con un contenitore di classe table-scroll e applicano la funzionalità di scorrimento usando il selettore adeguato.
Questo è quanto! Come avete visto, una volta predisposta la funzione di Chris Barr modificata da Jeff, Cormac e me è sufficiente usare una chiamata per applicare l’overflow agli elementi desiderati. Nel caso delle tabelle, è necessario inserire un contenitore addizionale, ma questo si può fare con Jquery, in modo da evitare di introdurre modifiche al markup della pagina.
