Ok, ich dachte, das wäre wirklich einfach, aber es stellt sich heraus, dass es nicht so ist. Ich denke, ich mache nur etwas in meinem HTML / CSS, aber hier geht es.
Ich habe eine einfache Seite wie folgt:
HTML
%Vor%test2.css
%Vor%test2.js
%Vor%Ich habe also ein Element auf der Seite ... ein div, das den gesamten Bildschirm einnimmt, oder vielmehr sollte es den gesamten Bildschirm abzüglich der Bildlaufleisten einnehmen. Jetzt habe ich ein bisschen geschnüffelt, wie man die Breite und Höhe einer Seite ohne die Scrollbars erfassen kann, aber leider gibt keiner von ihnen den richtigen Wert zurück ... was mich glauben lässt, dass ich das Boot in meinem HTML vermisse oder CSS.
Ich schaute auf Folgendes:
jquery - wie bekomme ich die Bildschirmbreite ohne Bildlaufleiste?
wie Sie die Größe des Browserfensters erhalten ohne die Bildlaufleisten
Was ich also brauche ist, dass eine Methode den Wert meines sichtbaren Bildschirms abzüglich des entsprechenden Bildlaufleistenwerts zurückgibt ... also sollte mein Wert für meine Breite 1425 sein, weil die Bildlaufleiste 15 Pixel breit ist. Ich dachte, das ist der Job von innerWidth, aber anscheinend liege ich falsch?
Kann jemand Einblick geben? (Ich führe Firefox 24 aus.)
BEARBEITEN
Um etwas Hintergrund hinzuzufügen, habe ich eine leere Seite. Ich werde Elemente einzeln dieser Seite hinzufügen, und ich muss die Breite der Seite verwenden, wenn ich die Größen für diese Elemente berechne. Schließlich wird diese Seite wachsen und wachsen, bis die Bildlaufleiste erscheint, weshalb ich versuche, die Bildlaufleiste von Anfang an dorthin zu zwingen, aber anscheinend tut das immer noch nichts.
EDIT2
Hier ist etwas noch Interessanteres ... wenn ich document.getElementById('scroll').clientWidth mache, bekomme ich die richtige innere Breite, aber wenn ich $('#scroll').width() oder $('#scroll').innerWidth() mache, geben beide die maximale Auflösung zurück ... klingt wie ein jQuery-Bug .
Entdeckte eine sehr hacky Lösung ... indem ich dies vor meinen Warnungen in test2.js hinzufüge, bekomme ich die richtige Breite:
%Vor% Folglich haben alle Warnungen jetzt die richtige Breite. Ich brauche auch nicht overflow-y im CSS, wenn ich es so mache. Neugierig, warum das alles löst ...
Die wirkliche Antwort sollte sein, dass HTML und CSS unverändert bleiben und dann document.getElementById('scroll').clientWidth verwendet wird. Wenn Sie clientWidth verwenden, wird der sichtbare Bereich abzüglich der Bildlaufleistenbreite angezeigt.
Ich habe das irgendwo hinbekommen und würde Kredit geben, wenn ich wüsste wo, aber das war erfolgreich für mich. Ich habe das Ergebnis als Padding hinzugefügt, als ich den HTML-Überlauf auf hidden gesetzt habe.
Problem ist, dass die Bildlaufleiste eine Funktion des Browsers und nicht der Webseite selbst ist. Die Messung sollte dynamisch erfolgen. Bei einer Messung mit einer Bildlaufleiste und einer Messung ohne Bildlaufleiste wird der Unterschied in der Breite berechnet.
Die Quelle gefunden: Ссылка
%Vor%Die richtige Antwort ist in diesem Beitrag als akzeptiert markiert: CSS-Medienabfragen und JavaScript-Fensterbreite stimmen nicht überein
Dies ist der richtige Code:
%Vor% Die richtige Breite der Seite wird durch $(document).width() angegeben.
Ihr Problem ist, dass Sie einen Bildlauf innerhalb des div verwenden ( Überlauf: scroll ).
Mit $(document).width() verringert der zurückgegebene Wert bereits die sichtbare Breite des Bildlaufs , aber wie fügt man einen Bildlauf in den zurückgegebenen div -Wert ein ist nicht mehr das Gleiche.
Da die Breite des Scrolls nicht standardmäßig ist und von System zu System und Browser zu Browser variiert, ist es schwierig zu lösen.
Ich schlage vor, dass Sie den Bildlauf des div entfernen und den Browser dies standardmäßig im body verwalten lassen, dann haben Sie ja die richtige Breite.
Tags und Links javascript html css scrollbar width