[CSS] horizontale scrollbar verwijderen

[amahusu]

Zoals de titel aangeeft, weet iemand of het mogelijk is om je horizontale scrollbar te verbergen, maar de content toch scrollable te houden?

Ik heb namelijk een pagina met daarin geanimeerde objecten, deze gaan van links naar rechts, over een afstand van ongeveer 2000 pixels. Nu werkt het animeren allemaal prima, maar logischerwijs verschijnt er ook een horizontale scrollbar zodra de objecten buiten de stage/body vallen.

Ik heb al gezocht op internet en dingen gevonden zoals 'overflow-x:hidden', maar dit geeft niet het gewenste resultaat. De objecten moeten zowieso te zien blijven, ook als ze zich dus buiten het 'zichtveld' bevinden, echter wil ik alleen af van de scrollbar. Navigatie van en naar de objecten (evt. buiten beeld) gebeurt middels de scrollto plugin.

Ik kan me zo 1,2,3, geen site voor de geest halen die dit heeft toegepast, dus het kan ook zijn dat het uberhaupt niet mogelijk is met puur css, maar wellicht dat een tweaker hier een workaround voor heeft.

edit: het gaat om de vliegtuigjes, tis een wip, dus let niet op de chaos

[ Voor 10% gewijzigd door amahusu op 20-06-2010 15:57 ]

[Zakkenwasser]

Cascading Stylesheet:

#CFWM {
width:300px;
}
#text{
width:300px;
}
#text_shade {
width:300px;
}

dat is de boosdoener

Een horizontale scrollbar komt alleen als je teveel indformatie over breedte uitsmeert (door bijvoorbeeld lagere resoluite)
Uiteindelijk ontkom jer toch niet aan bij lagere resolutie, maar in iedergeval op 1024x768 of hoger heb je er geen last meer van

[ Voor 88% gewijzigd door Zakkenwasser op 20-06-2010 16:34 ]

[TERW_DAN]

Maar als je niet wil scrollen, hoe moet je dan wel iets zichtbaar hebben (het valt dan toch buiten beeld)?
Dan kun je toch gewoon overflow-x op hidden zetten en als je iets wil laten zien de div waar het instaat zo positioneren zodat het binnen 't beeld valt?

[Peter]

CSS heeft de "overflow-x" property waarmee dat kan. Je kunt deze op "hidden" zetten en de scrollbalk zal niet weergegeven worden
.

Cascading Stylesheet:

#CFWM {
    overflow-x: hidden;
}

Formeel is dit pas sinds CSS 3 opgenomen, maar het werkt prima.

[amahusu]

Nevermind mensen, thanks voor het meedenken, heb het uiteindelijk maar toch opgelost middels een simpele show/hide functie.

Het idee was namelijk om op bepaalde coordinaten geinige eastereggs te plaatsen, maar als die meteen werden geladen als de pagina opende dan zag je meteen een gigantische horizontale scrollbar.

Met een hide functie is dat verholpen, zodra men op een vliegtuigje klikt dan wordt de div met de easteregg (op bijvoorbeeld left:1800px) zichtbaar.