Testen, ob Seite eine horizontale Bildlaufleiste hat (Computer & mobile Geräte)

Auf einer Webseite muss ich testen, ob es eine horizontale Bildlaufleiste gibt oder nicht (so dass ich die CSS eines anderen Elements programmgesteuert ändere). Gibt es eine Möglichkeit, diese Informationen mithilfe von jquery (oder reinem JavaScript) zu erhalten?Testen, ob Seite eine horizontale Bildlaufleiste hat (Computer & mobile Geräte)

I getestet

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

aber es scheint nicht mit allen Browsern zu funktionieren (nicht funktioniert zum Beispiel mit einem aktuellen Samsung-Telefon ich getestet). Ich brauche es, um mit allen Browsern zu arbeiten, einschließlich der letzten mobilen Geräte.

Vielen Dank!

EDIT 1

ich die Lösungen von plalx und laconbass bereitgestellt getestet, getestet IE8, Firefox, Chrome und iPad. Funktioniert mit IE, Firefox & Chrome aber nicht so wie ich es auf dem iPad will.

Das Problem ist mit dem Zoom-Funktion auf mobilen Geräten im Zusammenhang scheint: obwohl, wenn ich auf dem iPad heran in eine horizontale Bildlaufleiste angezeigt wird, document, window und document.body Breiten ändern sich nicht (war auch das gleiche Problem mit dem Samsung Telefon ich früher heute getestet).

Hier ist der Code, den ich zu Test verwendet:

<!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>

Jede Idee, wie das Vorhandensein einer horizontalen Scrollbar zu erkennen, die auf einem mobilen Gerät wie iPad in/out funktioniert auch nach dem Zoomen?

Quelle

2013-04-19 Walid

möglich duplizieren von http: // stackoverflow.com/questions/2059743/detect-elements-overflow-using-jquery – plalx

Ich habe versucht, die vorgeschlagene Lösung auf diesem Post, arbeitet mit chrome aber mit Firefox, '$ (" body ") [0] .scrollWidth' und' $ (" body ") [0] .clientWidth" sind gleich, auch wenn eine horizontale Bildlaufleiste vorhanden ist. – Walid

@plalx Vielleicht ist die Frage die gleiche, aber IMO ist es viel klarer dieses – 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);

Das funktioniert, weil JQuery nicht in der Lage sein, um den Bildschirm zu bewegen, wenn keine Scrollbar

Quelle

2013-04-19 19:58:46 Pabs123

funktional, aber nicht elegant, IMO – laconbass

Ich mag es, weil es Objektfunktionalität erkennt statt Mathe zu verwenden, um theoretisch zu bestimmen, ob es eine Bildlaufleiste gibt. Ich denke, es ist eigentlich eleganter. – mrbinky3000

@ mrbinky3000 Ich stimme der Tatsache zu, dass es korrekter ist, die Funktionalität statt der theoretischen Berechnungen zu erkennen. Ich stimme nicht zu, es ist eleganter, Eleganz ist nicht nur das Merkmal. Refactoring würde meine Meinung sicherlich ändern;) – laconbass

EDIT 2 verfügbar ist: Ich habe ein downvote, weil dies so, aber die Seite für nichts funktioniert nicht ich baute eine generische Lösung, die auf @ Pabs123 Antwort, nur zum Spaß:

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

oder sogar

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

Sehen Sie here, und wie kann es leicht angepasst werden, um vertikale Scrollbar Präsenz zu erkennen.

BEARBEITEN: Geprüft & arbeitet an Chrom und Firefox. Als jQuery-Team arbeitet das Crossbrowsing, Ich schlage die Verwendung von jQuery anstelle von nativem Javascript vor.

ich war neugierig, wie dies auf elegante Weise zu tun, als die zuvor vorgeschlagen (die tatsächlich funktioniert)

Die folgende Vergleich Arbeit mir

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

Sie es in Aktion sehen können with scroll bar und without it

Quelle

2013-04-19 20:12:21 laconbass

Ich sehe viele Antworten, die diese Lösung implementieren, aber es funktioniert nicht zuverlässig für mich in einem Textbereich. – tponthieux

@tponthieux Die Scroll-Feature-Erkennung von pabs123 sollte für Ihren Fall funktionieren, überprüfen Sie es – laconbass

Testen, ob Seite eine horizontale Bildlaufleiste hat (Computer & mobile Geräte)

Antwort

Verwandte Themen