nicht angemeldet
Scrollbalken verstecken, aber trotzdem scrollen können
2 
MudGuard
0 0 
Der Martin
0 0 
Matthias Apsel
0
0
Scrollbalken verstecken, aber trotzdem scrollen können
Hallo,
ich habe ein Problem, zu dem ich schon gegooglet hab, aber nix gefunden hab.
Es geht darum, dass ich einen div-container hab, bei dem man (vertikal) scrollen können soll.
Das ist nicht schwer.
Aber: Ich will den Scrollbalken verstecken, so dass man nur mit dem Mausrad scrollen kann.
Ich weiß, dass viele mir bestimmt davon abraten wollen, dass ich den Scrollbalken verstecke, weil der User dann nicht weiß, dass es noch mehr Text gibt und bla bla bla ...
Allerdings ist das div links auf der Seite gerade mal 300 px groß und es sieht einfach nicht gut aus, wenn in dem grün (#00AA00) ein grauer Scrollbalken ist.
Das passt einfach nicht zum Layout der Seite.
Professor Google hat schon zig Artikel darüber, allerdings handeln die meisten davon, wie man das Problem in einem Frame bzw. iframe löst.
Falls niemand eine Lösung findet, wäre ich trotzdem dankbar, wenn man mir wenigstens zeigen würde, wie man den horizontalen Balken ausblendet, weil man den nicht braucht.
Hier ist der grundlegende Code:
<!doctype html>
<html>
<head>
<title>Mein Design</title>
<style type="text/css">
.header { position:fixed; z-index:25; top:0; left:0; height:100px; width:100%; background-color:#F0F0F0; }
.header-menu { position:fixed; z-index:25; top:25px; left:50%; height:50px; width:700px; margin-left:-350px; background-color:#F0F0F0; }
.ht { position:fixed; z-index:25; top:100px; left:0; height:10px; width:100%; background:url(../img/htdot.png); }
.all-profil { position:fixed; z-index:20; top:100px; left:0; height:100%; width:300px; background-color:#00AA00; }
.profil-content { position:fixed; z-index:21; top:120px; left:10px; bottom:10px; height:auto; width:280px; background-color:#00AA00; }
.profil-content:hover { scrolling:auto; }
.profil-name { font-family:Verdana,Arial,Helvetica; font-size:15px; margin-bottom:10px; }
.profil-description { font-family:Verdana,Arial,Helvetica; font-size:10px; }
.profil-text-input { top:0; left:0; height:30px; width:100%; background-color:#22CC22; border:0; font-family:Verdana,Arial,Helvetica; font-size:20px; }
</style>
</head>
<body text="#000000" bgcolor="#FFDD00" link="#0000" alink="#000000" vlink="#000000">
<!-- HEADER -->
<div class="header">
<div class="header-menu">Menu</div>
</div>
<div class="ht"></div>
<!-- PROFIL -->
<div class="all-profil">
<div class="profil-content">
<div class="profil-name">Angemeldet als Matze</div>
<div class="profil-description">Status</div>
<input type="text" class="profil-text-input">
Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>
Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>
Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>
Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>
Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>
Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>
Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>
Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>
Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>
Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>
Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>Hallo<br>
Viiiiiiiiiiiiiiel Text
</div>
</div>
</body>
</html>
Mfg,
Matze
-
Hi,
Aber: Ich will den Scrollbalken verstecken, so dass man nur mit dem Mausrad scrollen kann.
Und wenn man gar kein Mausrad oder gar keine Maus hat?
Soll ja vorkommen - Smartphone, Pads, ...Ich weiß, dass viele mir bestimmt davon abraten wollen, dass ich den Scrollbalken verstecke, weil der User dann nicht weiß, dass es noch mehr Text gibt und bla bla bla ...
Nicht nur weiß er nichts davon, er hat, wenn Du es wirklich schaffen solltest, daß nur per Mausrad gescrollt werden kann, ggf. gar keine Chance, zu scrollen.
Allerdings ist das div links auf der Seite gerade mal 300 px groß und es sieht einfach nicht gut aus, wenn in dem grün (#00AA00) ein grauer Scrollbalken ist.
Das passt einfach nicht zum Layout der Seite.Was ist Dir wichtiger:
daß die Inhalte für Deine Besucher/Kunden erreichbar sind,
oder daß die für Deine Besucher/Kunden nicht-erreichbaren Inhalte gut aussehen?cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Und wenn man gar kein Mausrad oder gar keine Maus hat?
Soll ja vorkommen - Smartphone, Pads, ...Bei denen scrollt man durch Wischen über den Bildschirm.
Es gibt aber noch alte Laptops mit Touchpad, bei denen das nicht geht. Und ich kenne auch genug Leute, die wissen gar nicht, dass sie mit ihrem Touchpad auch scrollen können, wenn sie über die rechte Seite streichen.Ansonsten stimme ich zu, dass man die Scrollbalken nur verstecken sollte, wenn es auch nichts zu scrollen gibt.
-
Hallo,
Es gibt aber noch alte Laptops mit Touchpad, bei denen das nicht geht. Und ich kenne auch genug Leute, die wissen gar nicht, dass sie mit ihrem Touchpad auch scrollen können, wenn sie über die rechte Seite streichen.
das funktioniert aber bei den meisten Touchpads auch nur, wenn man sie mit einem speziellen Treiber nutzt. Die meisten Anwender werden aber mangels besserem Wissen vermutlich die gewöhnliche Maus-Emulation mit dem generischen Maustreiber nutzen, den das OS zur Verfügung stellt.
Ansonsten stimme ich zu, dass man die Scrollbalken nur verstecken sollte, wenn es auch nichts zu scrollen gibt.
Ähm, nein, dann sollten sie im Normalfall von allein verschwinden.
Ciao,
Martin--
I do take my work seriously, and the way to do that is not to take yourself too seriously.
(Alan Rickman, britischer Schauspieler)
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(-
Ansonsten stimme ich zu, dass man die Scrollbalken nur verstecken sollte, wenn es auch nichts zu scrollen gibt.
Ähm, nein, dann sollten sie im Normalfall von allein verschwinden.
OK, anders ausgedrückt: Solange es etwas zu scrollen gibt, sollten die Scrollbalken auch sichtbar sein, wenn man will, dass gescrollt werden kann.
-
Om nah hoo pez nyeetz, Meinereiner!
OK, anders ausgedrückt: Solange es etwas zu scrollen gibt, sollten die Scrollbalken auch sichtbar sein, wenn man will, dass gescrollt werden kann.
nicht unbedingt. Es muss lediglich deutlich werden, dass beispielsweise ein Text noch weitergeht. text-overflow --> leere Seite in unserem Wiki (Zaunpfahl) und es war auch mal ein overflow-style angedacht, der aber inzwi...
Matthias
--
Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Laus und Lauschaer Glas.
-
Ok,
dann lasse ich die Scrollbalken an Ort und Stelle.
Aber im Firefox kann man ja nicht das Aussehen ändern. Was soll man da machen?
http://www.web-toolbox.net/webtoolbox/css/css-scrollbar.htmMfg,
Matze-
Om nah hoo pez nyeetz, Matze!
dann lasse ich die Scrollbalken an Ort und Stelle.
Aber im Firefox kann man ja nicht das Aussehen ändern. Was soll man da machen?Nichts. Die Bedienelemente des Browsers sollten so aussehen wie immer. Für Geräte, die hovern können, könnte ich mir einen Wechsel zwischen overflow: hidden und auto vorstellen. Wenn du einen Blick auf die Seite zuließest, könnte man mehr sagen oder sogar eine grundsätzlich andere Herangehensweise vorschlagen.
Matthias
-
Hi,
Für Geräte, die hovern können, könnte ich mir einen Wechsel zwischen overflow: hidden und auto vorstellen.
Du meinst so, daß Scrollen per Tastatur nicht möglich ist, wenn nicht zufällig die Maus über dem Element steht?
cu,
Andreas--
Warum nennt sich Andreas hier MudGuard?
O o ostern ...
Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
-
Om nah hoo pez nyeetz, MudGuard!
Für Geräte, die hovern können, könnte ich mir einen Wechsel zwischen overflow: hidden und auto vorstellen.
Du meinst so, daß Scrollen per Tastatur nicht möglich ist, wenn nicht zufällig die Maus über dem Element steht?
Nicht wirklich. Ein Design, welches Scrollbalken erfordert, die gleichzeitig aber unerwünscht sind, ist imho kaputt.
Matthias
-
Ja, ich lass es jetzt so, wie es ist.
Matze
PS.:Bitte habt Verständnis dafür, dass ich nicht meine Seite angebe, denn
1. Hat der Server pleite gemacht und sie wird auf einen anderen verschoben, weshalb meine Seite vorübergehend deaktiviert ist.
2. Bin ich erst 13 und möchte im Internet nicht zu viele Informationen über mich preisgeben (weshalb ich auch NICHT bei Facebook & co. bin).
-
-
-
-
Hallo,
dann lasse ich die Scrollbalken an Ort und Stelle.
Aber im Firefox kann man ja nicht das Aussehen ändern.im Opera auch nicht, wenn's der Nutzer nicht möchte.
Im IE auch nicht, wenn's der Nutzer nicht möchte.
Im Chrome ... weiß ich nicht.Was soll man da machen?
Nichts. Dem Nutzer seine vertrauten Bedienelemente lassen.
Ciao,
Martin--
In der Theorie stimmen Theorie und Praxis genau überein.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
-
-
-
-
Allerdings ist das div links auf der Seite gerade mal 300 px groß und es sieht einfach nicht gut aus, wenn in dem grün (#00AA00) ein grauer Scrollbalken ist.
Das passt einfach nicht zum Layout der Seite.Ausblenden ist da schon eine sehr drastische Maßnahme, reicht nicht ein optisches Anpassen?