滚动条A滚动后停止对滚动条B的事件监听,就行啦。
然后做个时间差根据滚动条位置判断是否滚动停止,停止了就恢复滚动条B的事件监听。
初步是这样想的,你可以试试。

解决方案 »

  1.   

    直接看demo:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>test</title>
    </head> <body>
       <div id="d1" style="width:200px;height:300px;overflow:auto;float:left;border:solid 1px red;" onscroll="scroll1()">
       <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
       <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
       </div>
       <div id="d2" style="width:200px;height:300px;overflow:auto;float:left;border:solid 1px green;" onscroll="scroll2()">
       <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
       <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
       </div>
       <script type="text/javascript">
       var target=0;
       var d1=document.getElementById("d1");
    var d2=document.getElementById("d2");
    function scroll1(){
    if(target==2)return;
    target=1;
    d2.scrollTop=d1.scrollTop;
    target=0;
    }
    function scroll2(){
    if(target==1)return;
    target=2;
    d1.scrollTop=d2.scrollTop;
    target=0;
    }
       </script>
    </body>
    </html>