Javascript 创建多个滚动条_Javascript_Jquery

Javascript 创建多个滚动条

javascript jquery

Javascript 创建多个滚动条,javascript,jquery,Javascript,Jquery,我在创建多个滚动条时遇到问题 <html> <head> <script> document.observe('dom:loaded',function(){ var scrollbar = new Control.ScrollBar('scrollbar_content','scrollbar_track'); $('scroll_down_50').observe('click',function(event){ scrollba

我在创建多个滚动条时遇到问题

<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('&lt;p><b>Inserted: ' + $('repeat').innerHTML + '</b>&lt;/p&gt;');
    //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>


document.observe（'dom:loaded'，function（））{
var scrollbar=new Control.scrollbar（'scrollbar\u content'，'scrollbar\u track'）；
$（'scroll\u down\u 50'）。观察（'click'，函数（事件）{
scrollbar.scrollBy（-50）；
事件停止（）；
警惕（‘嘿’）；
});
$（'scroll\u up\u 50'）。观察（'click'，函数（事件）{
scrollbar.scrollBy（50）；
事件停止（）；
});
$（'scroll_top'）。观察（'click'，函数（事件）{
scrollbar.scrollTo（'top'）；
事件停止（）；
});
$（'scroll_bottom'）。观察（'click'，函数（事件）{
//要设置滚动操作的动画，可以传递true
//或在滚动完成时调用的回调
scrollbar.scrollTo（'bottom'，function（）{
if（类型（控制台）！=“未定义”）
log（'已完成底部滚动'）；
});
事件停止（）；
});
$（'scroll_second'）。观察（'click'，函数（事件）{
//您可以传递要滚动到的数字或元素
//如果传递一个元素，它将居中，除非它是
//靠近容器底部
滚动条。滚动到（$（‘第二个_副标题’）；
事件停止（）；
});
$（'scroll_third'）。观察（'click'，函数（事件）{
//传递true将设置滚动的动画
scrollbar.scrollTo（$（'third_subhead'），true）；
事件停止（）；
});
$（'scroll_insert'）。观察（'click'，函数（事件）{
$（'scrollbar_content'）。插入（'p>Inserted:'+$（'repeat'）。innerHTML+'/p'）；
//仅当ajax或dom操作修改布局时，才需要调用此函数
//当窗口调整大小时，将自动调用此函数
scrollbar.recreactelayout（）；
事件停止（）；
});
});}
我的群组
关注警报（您关注的人的更新）

我可以为“groups”div获取滚动条，但无法为“follow”div获取滚动条。有人能告诉我哪里出了问题吗？有人能解释一下javascript中document.observe（'dom:loaded'，function（））的工作原理吗