Ciao ragazzi
vorrei fare un div che orizzontalmente scrolla normalmente con lo scrollare della barra del browser orizzontale, mentre in verticale, nonostante si scrolli in verticale, questa rimane nella sua posizione Y.
Questo perchè vorrei fare una barra di una tabella con molti campi che in orizzontale ovviamente scrolli ma in verticale rimane ferma in modo che rimanga un riferimento per i dati presenti in tutte le colonne.
Avete uno scriptino facile facile?
forse potrebbe aiutarti la proprietà css overflow.
guarda overflow
Ciao
Basta una regola CSS:
codice:<div style="overflow-x:auto; overflow-y:hidden;"></div>
Forse non mi sono spiegato bene io.
Ho un div sul documento. Uso lo scroll orizzontale del browser, tutto il documento (compreso il div) sembra scrollare orizzontalmente.
Poi uso lo scroll verticale del browser, e tutto il documento scrolla TRANNE il div in oggetto.
Queste proprietà overflow x e y non mi pare facciano questo, oltretutto ho letto la compatibilità e c'è scritto IE 9+ e non mi sembra il caso
Più che altro credo che sia qualcosa realizzabile con jquery e/o javascript.
Avete qualche idea?
Questa soluzione è valida sia per per una "barra" allineata a sinistra (CSS commentato) che per una barra centrata (CSS non commentato).codice:<!doctype html> <html> <head> <meta charset="utf-8"> <title>Left static - Top fixed</title> <style type="text/css"> html,body{ height:150%; width:150%; } /*left in pixel*/ /*#fixedY{ position:fixed; top:100px; left:50px; width:300px; height:200px; background:red; }*/ /*left percentuale (per centrare)*/ #fixedY{ position:fixed; top:100px; left:50%; width:300px; height:200px; background:red; }/*il margin-left negativo deve essere inline per essere leggibile da js*/ </style> <script language="javascript" type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script type="text/javascript"> var initialLeft; $(function(){ initialLeft=Number($('#fixedY').offset().left)-parseInt($('#fixedY').css('marginLeft')); }); $(window).scroll(function(){ $('#fixedY').css('left',initialLeft-$(window).scrollLeft()); }); </script> </head> <body> <div id="fixedY" style="margin-left:-150px;"></div> </body> </html>
Se usi una barra centrata, il margin-left negativo (pari a metà della larghezza, width, della barra) deve essere dichiarato inline, come nell'esempio, perchè sia leggibile da js.
Ottimo, fa proprio quello che mi serviva. Non riuscivo a trovarlo in Google. Ora mi tocca capire come fa. Grazie mille
Prego,
Se hai domande, chiedi pure.
Ciao
Permessi di invio
Rispondi quotando