Originariamente inviato da Xinod
serve la libreria
prototype per quello script
l' hai inclusa nel documento?
No non ho incluso la libreria e dal link che mi hai passato non riesco a scaricarla o almeno ho fatto un copia e incolla del link download messa nel codice e non funziona il codice che ho è il seguente...
codice:
<!DOCTYPE html>
<html>
<head>
<title>Control.ScrollBar : Pure JavaScript/CSS scroll bars for Prototype</title>
<script src="lib.js"></script>
<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('
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;
right: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">
Nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce consectetuer. Phasellus molestie, sem vel laoreet pretium, arcu arcu rutrum eros, ac mattis felis ante at orci. Vivamus vel mauris.
</div>
</div>
Insert Paragraph and recalculateLayout()</p>
</div>
</div>
</body>
</html>
Permessi di invio
Rispondi quotando