scrollbar boven div

Status
Niet open voor verdere reacties.
ecross

ecross

Gebruiker
Lid geworden
4 mrt 2009
Berichten
638
hallo,

eerst: ik kan geen javascript, maar ik werd doorgestuurd door de php afdeling.
daarna: is het mogelijk om een scrollbar boven en onder een <div> te hebben?

alvast bedankt, Ecross
 
Hoi ecros,
Als je aan alleen een (horizontale) scrollbar onderin een div genoeg hebt, kan het gewoon met css, met de eigenschap "overflow".
Als je (ook) een scrollbar bovenaan in een div wilt hebben, dan denk ik dat er inderdaad javascript aan te pas moet komen.

Met vriendelijke groet,
CSShunter
 
het gaat me echt om de horizontale scrollbars boven de div
toch bedankt
 
Ik denk dat het inderdaad mogelijk moet zijn om zoiets ongeveer na te bootsen in javascript.

Je zou dan een kleine extra div boven de div in kwestie kunnen plaatsen en die een scrollbalk geven. Vervolgens zou je die scrollbalk af kunnen luisteren met het onscroll event en de eventuele verplaatsing op de div eronder toepassen.
Hoe dat er uiteindelijk uit komt te zien, en in hoeverre de technieken in all browser werkt zou ik niet kunnen zeggen.

Een andere manier is om totaal zelf een scrollbalk te maken (of te vinden), of misschien een Flash oplossing.

EDIT:

Voor je er aan begint zou ik mij nog eens afvragen wat de meerwaarde hiervan is. Indien je een javascript oplossing gaat gebruiken, breng je bruikbaarheid en toegankelijkheid van je site schade toe en je hebt een hoop extra werk. Waarschijnlijk enkel om het uiterlijk?. Mensen verwachten denk ik ook altijd de scrollbalk aan de onderkant.
 
Laatst bewerkt:
zoals ik al zei: ik kan geen javascript.
dus zou jij (of iemand anders) dat voor mij kunnen maken?
 
Ik heb heel even snel wat gemaakt, maar dit is alleen getest in Firefox op Ubuntu, dus zelf testen!
In je HTML plaats je dit: (de div die in #do zit is de div die je wil scrollen)
PHP: 
 <div id='say' >
     <div></div>
    </div>
    <div id='do' >
     <div>dummy tekst om te kunnen zien of de scroll daadwerkelijk werkt</div>
    </div>

PHP: 
/* de CSS: */

/* hoogte maakt niet uit */
#say, #do
{
    width: 400px;
}

/* de div in say moet gelijk zijn aan die in do */
#say div, #do div
{
    width: 800px;     
}

#say div
{
    height: 2px;
    background-color: transparent
}

#say
{
    overflow-x: scroll;
    overflow-y: hidden;
    /* hoogte van #say is op voor discussie :P */
    height: 18px;
}

#do
{
    height: 400px;
    overflow: hidden;
    background-color: red;
}
}

Het script:
PHP: 
addEvent(window,"load",init);

var $say,$do;
function init()
{
    $say = document.getElementById('say');
    $do = document.getElementById('do');
    addEvent($say,"scroll",sayDo);
}


function sayDo()
{
    $do.scrollLeft = $say.scrollLeft;
}


// Ik maak gebruik van de addEvent en removeEvent functies van John Resig
function addEvent( obj, type, fn )
{
	if (obj.addEventListener)
		obj.addEventListener( type, fn, false );
	else if (obj.attachEvent)
	{
		obj["e"+type+fn] = fn;
		obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
		obj.attachEvent( "on"+type, obj[type+fn] );
	}
}

function removeEvent( obj, type, fn )
{
	if (obj.removeEventListener)
		obj.removeEventListener( type, fn, false );
	else if (obj.detachEvent)
	{
		obj.detachEvent( "on"+type, obj[type+fn] );
		obj[type+fn] = null;
		obj["e"+type+fn] = null;
	}
}

Ik hoop dat je er iets mee kan.

EDIT:
Ik moet dit er toch weer even bij zeggen: Wanneer je gebruik maakt van dit script, hebben mensen die geen javascript hebben automatisch geen werkende scrollbar meer. Uiteindelijk wil je een oplossing waarbij CSS standaard een gewone scrollbalk heeft en javascript de CSS aanpast en de eigen scrollbar toevoegt.
 
Laatst bewerkt:
bedankt: :D
ik heb bij de css bij #do nog deze toegevoegd:
overflow-x: scroll
zodat je ook onder een scrollbar hebt,
alleen als je nu eerst met de onderste scrollbar scroll en dan met de bovenste werkt dat niet:
hij springt dan weer terug naar het begin, kun je hier iets voor maken?
andersom werkt het wel.
en kun je er voor zorgen dat als javascript niet aan staat er ook geen scrollbar is?

hier staat hij online : *klik*

ps. het werkt bij mij ook in ff en ie
 
Laatst bewerkt:
Ik denk dat je zo de init functie aan moet passen en de doSay functie toevoegen (Je zou doSay en sayDo ook samen kunnen voegen naar een enkele functie)

PHP: 
function init()
{
    $say = document.getElementById('say');
    $do = document.getElementById('do');
    $say.style.display = 'block';
    addEvent($say,"scroll",sayDo);
    addEvent($do,"scroll",doSay);
}
 
 
function sayDo()
{
    $do.scrollLeft = $say.scrollLeft;
}
function doSay()
{
    $say.scrollLeft = $do.scrollLeft;
}

in de css onder #say zet je:

PHP: 
display: none;

Ik hoop dat het lukt.
 
sorry, maar hoe ziet de code er helemaal dan uit?
 
Ik neem aan zoiets:

PHP: 
/* de CSS: */
 
/* hoogte maakt niet uit */
#say, #do
{
    width: 400px;
}
 
/* de div in say moet gelijk zijn aan die in do */
#say div, #do div
{
    width: 800px;     
}
 
#say div
{
    height: 2px;
    background-color: transparent
}
 
#say
{
    overflow-x: scroll;
    overflow-y: hidden;
    display: none;
    /* hoogte van #say is op voor discussie :P */
    height: 18px;
}
 
#do
{
    height: 400px;
    overflow: hidden;
    background-color: red;
}

PHP: 
//het javascript

addEvent(window,"load",init);

function init()
{
    $say = document.getElementById('say');
    $do = document.getElementById('do');
    $say.style.display = 'block';
    addEvent($say,"scroll",sayDo);
    addEvent($do,"scroll",doSay);
}
 
 
function sayDo()
{
    $do.scrollLeft = $say.scrollLeft;
}
function doSay()
{
    $say.scrollLeft = $do.scrollLeft;
}


 
// Ik maak gebruik van de addEvent en removeEvent functies van John Resig
function addEvent( obj, type, fn )
{
    if (obj.addEventListener)
        obj.addEventListener( type, fn, false );
    else if (obj.attachEvent)
    {
        obj["e"+type+fn] = fn;
        obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
        obj.attachEvent( "on"+type, obj[type+fn] );
    }
}
 
function removeEvent( obj, type, fn )
{
    if (obj.removeEventListener)
        obj.removeEventListener( type, fn, false );
    else if (obj.detachEvent)
    {
        obj.detachEvent( "on"+type, obj[type+fn] );
        obj[type+fn] = null;
        obj["e"+type+fn] = null;
    }
}
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan