Verifica se la pagina ha una barra di scorrimento orizzontale (computer e dispositivi mobili)

In una pagina Web, è necessario verificare se è presente una barra di scorrimento orizzontale o meno (in modo che venga modificato in modo programmatico il css di qualche altro elemento). C'è un modo per ottenere queste informazioni usando jquery (o pure javascript)?Verifica se la pagina ha una barra di scorrimento orizzontale (computer e dispositivi mobili)

ho testato

function isHorizontalScrollbarEnabled() { 
    return $(document).width()!=$(window).width(); 
}

ma non sembra funzionare con tutti i browser (non funziona, ad esempio con un recente telefono Samsung ho provato). Ne ho bisogno per funzionare con tutti i browser, compresi i recenti dispositivi mobili.

Grazie!

EDIT 1

Ho provato le soluzioni fornite da plalx e laconbass, testato IE8, Firefox, Chrome e iPad. Funziona con IE, Firefox & Chrome ma non come voglio sull'iPad.

Il problema sembra legato alla funzione di zoom su dispositivi mobili: anche se, quando ho ingrandire l'iPad, viene visualizzata una barra di scorrimento orizzontale, document, window e document.body larghezze non cambiano (è stato anche lo stesso problema con il Samsung telefono che ho provato prima oggi).

Ecco il codice che ho usato per prova:

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> 
     <title>test</title> 
    </head> 

    <body> 
     <div style="width: 500px; background: red;" id="test">click here to test</div> 
     <script type="text/javascript"> 
     var i = 1; 
     $("#test").click(function(){ 
      $(this).html("Test #" + (i++) 
    + "<br>document width=" + $(document).width() + ", windows width=" + $(window).width() 
    + "<br>document width=" + $(document).width() + ", body width=" + $(document.body).width() 
     ); 
     });  
     </script> 
    </body> 
</html>

Qualsiasi idea di come rilevare la presenza di una barra di scorrimento orizzontale, che funziona anche dopo lo zoom in/out su un dispositivo mobile come iPad?

fonte

2013-04-19 Walid

possibile duplicato di http: // StackOverflow.it/questions/2059743/detect-elements-overflow-using-jquery – plalx

Ho provato la soluzione suggerita su quel post, funziona con chrome ma con firefox, '$ (" body ") [0] .scrollWidth' e' $ (" body ") [0] .clientWidth' sono uguali anche se esiste una barra di scorrimento orizzontale. – Walid

@plalx Forse la domanda è la stessa ma IMO è molto più chiaro questo – laconbass

//scrol 1px to the left 
$(document).scrollLeft(1); 

if($(document).scrollLeft() != 0){ 
    //there's a scroll bar 
}else{ 
    //there's no scrollbar 
} 

//scroll back to original location 
$(document).scrollLeft(0);

Questo funziona perché JQuery non sarà in grado di scorrere lo schermo se non barra di scorrimento è disponibile

fonte

2013-04-19 19:58:46 Pabs123

funzionale ma non elegante, IMO – laconbass

Mi piace perché rileva la funzionalità dell'oggetto invece di utilizzare la matematica per determinare in teoria se esiste una barra di scorrimento. Penso che sia più elegante, in realtà. – mrbinky3000

@ mrbinky3000 Concordo sul fatto che sia più corretto rilevare la funzionalità anziché i calcoli teorici. Non sono d'accordo è più elegante, l'eleganza non è solo la caratteristica. Il refactoring cambierebbe sicuramente la mia opinione;) – laconbass

EDIT 2: Ho ricevuto una downvote perché questo non funziona per niente, ma la pagina in modo ho costruito una soluzione generica sulla base di @ Pabs123 risposta, solo per divertimento:

function hasScrollX(selector){ 
    var e = $(selector), fn = 'scrollLeft'; 
    return e[fn](1) && e[fn]() > 0 && e[fn](0) && true; 
}

o anche

jQuery.fn.hasScrollX = function(){ 
    var fn = 'scrollLeft'; 
    return this[fn](1) && this[fn]() > 0 && this[fn](0) && true; 
}

Vedere here e come può essere facilmente adattato per rilevare la presenza verticale della barra di scorrimento.

MODIFICA: Testato su & su chrome e firefox. Poiché il team jQuery esegue il crossbrowsing, suggerisco l'uso di jQuery piuttosto che del javascript nativo.

io eravamo curioso di sapere come fare questo in modo elegante quello suggerito in precedenza (che in realtà il lavoro)

Il seguente lavoro di confronto a me

$(document).width() > $(window).width()

potete vederlo in azione with scroll bar e without it

fonte

2013-04-19 20:12:21 laconbass

Vedo molte risposte che implementano questa soluzione, ma non funziona in modo affidabile per me su un'area di testo. – tponthieux

@tponthieux Il rilevamento delle funzioni di scorrimento pubblicato da pabs123 dovrebbe funzionare per il tuo caso, controllarlo – laconbass

Verifica se la pagina ha una barra di scorrimento orizzontale (computer e dispositivi mobili)

risposta

Problemi correlati