[CSS] Scrollbar wel volledige hoogte, content niet

[Verwijderd]

Ik heb een scrollbar in een <div> die automatisch getoond wordt wanneer de content te lang wordt. Natuurlijk is dit basismaterie en het werkt allemaal zoals het hoort maar ik heb toch een vraag waar ik niet helemaal uit kom.

Ik gebruik de volgende code:

code:

<div style="position:relative; width:557px; height:480px; overflow:auto; scrollbar-face-color : #531700; scrollbar-highlight-color : #EBE7DB; scrollbar-3dlight-color : #EBE7DB; scrollbar-shadow-color : #EBE7DB; scrollbar-darkshadow-color : #EBE7DB; scrollbar-track-color : #EBE7DB; scrollbar-arrow-color : #EBE7DB;">
Content
</div>

Wat nu gebeurd is dat wanneer de hoogte van de content hoger is dan 480px er een scrollbar verschijnt. Het probleem is dat de content over de gehele 480px gescrolled wordt. Het resultaat is dat de content langs de randen gaat en dat vind ik niet mooi.

Een oplossing zou zijn om de content minder hoog te maken, maar dan wordt de scrollbar ook minder hoog en dat ziet er ook niet mooi uit.

Hebben jullie wellicht een idee hoe ik de hoogte van de scrollbar zelf 480px kan houden en de content die gescrolled wordt lager zoals bijvoorbeeld 420px zodat de content niet in de buurt komt van de randen.

Ik heb van alles geprobeerd met CSS, spacers, etc. Maar het blijft óf een kleinere scrollbar óf de content die langs de randen gaat.

Ik heb ook gedacht aan een javascript maar ik ben niet zo thuis in JS en ik wil natuurlijk wel iets dat universeel inzetbaar is (ook al zijn de kleuren van deze scrollbar dat niet).

[Padschild]

Wat bedoel je precies met langs de randen gaat? De tekst mag de rand niet aanraken, maar moet voortijdig verdwijnen zeg maar? Als ik een border om de div heen zet, sluit deze inderdaad naadloos aan op de scrollbar en de content.

Met een padding krijg het effect dat hij in het begin niet de rand van de border raakt, maar op het moment dat je begint te scrollen wel, wat op zich logisch is.

Wat ik ooit heb gezien, is dat je met javascript/dhtml een control maakt waarmee kunt scrollen, en dat dan vertaald op een andere div. Hierdoor is de 'scrollbar' los van de div die je wilt scrollen.

DHTML Scroll dingetjes

Hiermee kun je de div dan de juiste margin weergeven lijkt me, zoals in de voorbeelden is gegeven. De scripts staan eronder.

[ Voor 8% gewijzigd door Padschild op 06-06-2007 14:29 ]

[Verwijderd]

Klopt, de text moet voortijdig verdwijnen tijdens het scrollen en de scrollbar moet de volledige hoogte hebben zodat het aansluit bij de layout.

Bedankt voor de link, ik zal er eens mee gaan vogelen.