Media-Query für: horizontaler Scrollbar wird angezeigt?

[MudGuard]

Hi,

ich habe eine nicht-öffentl. Seite, die im Normalfall am PC betrachtet wird.

Die Seite enthält eine Tabelle, die (auf meinem Monitor) ca. 60% der Breite braucht, sowie rechts oben per position:fixed festgenagelt eine Navigation für die einzelnen tbody-Elemente.

Wenn ich die Seite gelegentlich mal auf dem Smartphone betrachte, ist jetzt die Navigation im Weg (liegt auf der Tabelle) - auf dem Smartphone könnte die auch entfallen, dann scrolle ich halt manuell zur passenden Zeile.

Gleiches würde bei kleinerem Desktop passieren.

Eine Idee hätte ich (paßt zwar nicht 100%, wäre aber schon mal ein guter Kompromiß): die Navigation ausblenden, wenn die Tabelle breiter ist als der verfügbare Platz - sprich: wenn ein horizontaler Scrollbar sichtbar wäre.

Ihc hab zum Thema Media-Queries und Scrollbar overflow-inline gefunden - aber das greift, wenn ein horizontaler Scrollbar erscheinen würde, falls der Inhalt zu breit würde - also nicht erst, wenn der Scrollbar tatsächlich erscheint …

Vielleicht ist ja eine Media-Query auch das falsche Mittel? Gibt es sowas wie body::hasHorizontalScrollbar? Oder sonst ein CSS-Mittel, mit dem ich erkennen kann, ob der Scrollbar tatsächlich benötigt wird?

So wie bei meiner vorherigen Frage kann ich leider nicht mit Javascript arbeiten, ich kann in die betroffene Seite nur CSS "injizieren"

Danke im Voraus! cu,
Andreas a/k/a MudGuard

[MrMurphy]

Deine Angaben sind noch recht allgemein, sachliche Informationen fehlen fast völlig. Soweit ich verstanden habe handelt es sich um eine einzige Seite.

Media Queries können dir helfen. Von ausgeblendeten Navigation halte ich nichts, die sind für User nur eine zusätzliche Barriere.

Ich würde die Navigation bei schmalem Fenster / Bildschirm über die Tabelle setzen und je nach Bedarf und Sinnhaftigkeit einen oder mehrere Zurück-Links setzen.

[Rolf B]

Hallo MudGuard,

Fragen:

• ist die Breite der Tabelle variabel oder ist sie – beispielsweise auf 971px oder 61em – festgelegt?
• wie ist die HTML Struktur? Also: welches gemeinsame Elternelement haben Table und Menü, und wieviel HTML ist da drumrum und dazwischen?

Je nach HTML Aufbau kann man ggf. mit Container Queries arbeiten, um abzufragen, ob die Tabelle breiter wird als bspw. 90% des Fensters. Wichtig wäre dafür, ob die Tabelle in einem Container-Element steckt, das so breit ist wie die Tabelle (oder das man mittels geeignetem CSS so breit wie die Tabelle machen kann).

Eine HTML Demo der Seite, nicht mit den echten Daten natürlich, wäre hier echt hilfreich.

Rolf

[MudGuard]

Hi,

• ist die Breite der Tabelle variabel oder ist sie – beispielsweise auf 971px oder 61em – festgelegt?

wenn die Breite fix wäre, wäre das ja mit einer einfachen media-query (width < 971px) zu erledigen.

Je nach HTML Aufbau kann man ggf. mit Container Queries arbeiten

das klingt interessant. Kenne ich bisher nicht.

Da werd ich mich mal einarbeiten.

Danke für den Ansatzpunkt!

Andreas a/k/a MudGuard