我在创建多个滚动条时遇到问题。
<html>
<head>
<script>
document.observe('dom:loaded',function(){
var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track');
$('scroll_down_50').observe('click',function(event){
scrollbar.scrollBy(-50);
event.stop();
alert('hey');
});
$('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><b>Inserted: ' + $('repeat').innerHTML + '</b></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>
</head>
<body>
<div id="groups">
<p style="font-family: arial; font-size:13px; font-weight:bold; color: grey; text-align:center;">My Groups</p>
<div id="scrollbar_container">
<div id="scrollbar_track"><div id="scrollbar_handle"></div></div>
<div id="scrollbar_content"> <!-- Groups Nmaes-->
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g1.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Heye sup</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g2.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Sale anywhere?</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g1.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Marriage :)</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g2.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Happy b'day divya!</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g1.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">New year plans?</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g2.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Wassup???</span></span></a>
<!-- <a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g2.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Wassup???</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g2.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Wassup???</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g2.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Wassup???</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g2.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Wassup???</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g2.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Wassup???</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g2.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Wassup???</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g2.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Wassup???</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g2.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Wassup???</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g2.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Wassup???</span></span></a>
--></div>
</div>
</div>
<div id="follow">
<p style="font-family: arial; font-size:14px; font-weight:bold; color: grey; text-align:center;">Follow Alerts<br/><span style="font-size:11px; font-weight:400;">(Updates of people whom you follow)</span></p>
<div id="scrollbar_container">
<div id="scrollbar_track"><div id="scrollbar_handle"></div></div>
<div id="scrollbar_content"> <!-- Groups Nmaes-->
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g1.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Sanjeev Kapoor</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g2.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Shehnaz Hussain</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g1.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Sonia Gandhi</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g2.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Shobha De</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g1.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">A R Rahman</span></span></a>
<a href="http://google.co.in"><span id="g1"><img alt="image" src="images/g2.png" id="group_img" style="vertical-align:middle"/><span style="vertical-align:middle">Dr Jayanti Reddy</span></span></a>
</div>
</div>
</div>
</body>
</html>
我能够获得'groups'div的滚动条,但是我无法获得'follow'div的滚动条。 有人可以建议我在哪里出错。有人在javascript中解释了document.observe('dom:loaded',function())的工作。