ho trovato questa guida per inserire questa scrollbar personalizzata: http://livepipe.net/control/scrollbar
allora ho fatto un documento di prova cosi:
purtroppo il risultato è un documento con scrittocodice:<html> <head> <script> var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track'); $('scroll_down_50').observe('click',function(event){ scrollbar.scrollBy(-50); event.stop(); }); $('scroll_up_50').observe('click',function(event){ scrollbar.scrollBy(50); event.stop(); }); $('scroll_top').observe('click',function(event){ scrollbar.scrollTo('top'); event.stop(); }); $('scroll_bottom').observe('click',function(event){ //to animate a scroll operation you can pass true //or a callback that will be called when scrolling is complete scrollbar.scrollTo('bottom',function(){ if(typeof(console) != "undefined") console.log('Finished scrolling to bottom.'); }); event.stop(); }); $('scroll_second').observe('click',function(event){ //you can pass a number or element to scroll to //if you pass an element, it will be centered, unless it is //near the bottom of the container scrollbar.scrollTo($('second_subhead')); event.stop(); }); $('scroll_third').observe('click',function(event){ //passing true will animate the scroll scrollbar.scrollTo($('third_subhead'),true); event.stop(); }); $('scroll_insert').observe('click',function(event){ $('scrollbar_content').insert('<p>Inserted: ' + $('repeat').innerHTML + '</p>'); //you only need to call this if ajax or dom operations modify the layout //this is automatically called when the window resizes scrollbar.recalculateLayout(); event.stop(); }); </script> <style> #scrollbar_container { position:relative; width:500px; } #scrollbar_track { position:absolute; top:0; rightright:0; height:100%; width:10px; background-color:transparent; cursor:move; } #scrollbar_handle { width:10px; background-color:#5c92e7; cursor:move; -moz-border-radius: 5px; -webkit-border-radius: 5px; opacity:0.9; -moz-opacity:0.9; } #scrollbar_content { overflow:hidden; width:485px; height:250px; } </style> </head> <body> <div id="scrollbar_container"> <div id="scrollbar_track"><div id="scrollbar_handle"></div></div> <div id="scrollbar_content">prova prova prova prova prova prova prova prova prova prova prova prova prova </div> </div> </body> </html>
prova
prova
prova
fino a che non spariscono le scritte senza scrollbar... c'è qualcuno che mi può aiutare a capire cosa ho sbagliato???
grazie
Rispondi quotando
