有点棘手的问题(dataGrid,datalist嵌套同步滚动)

显示效果如下:这是datagrid嵌套datalist输出的主从表数据
     [color=#0000FF]产品种类: AAA(//动态绑定)[/color]//下一条记录为BBB
     产品名称   产品信息1  产品信息2
      AAA_a1      aaa1      aaa2//动态绑定
问题:我想实现外层datagrid和内层datalist同步滚动,也就是当Datalist的记录滚动完之后(假设有10条记录),当滚动完10条后
datagrid的种类和产品同时滚动到产品种类为BBB,(如果产品没有滚动完时,产品种类是不滚动的),datalist显示为产品种类为BBB的产品(其中蓝色部分不动.只更新动态绑定部分)
请教:1,我现在只能实现要不全部滚动要不不滚动,我把div放到datalist外面时不滚动
     2,我把datalist的部分以iframe形式 放到另外一个页面处理,用10倍的滚动时间赋给datagrid的滚动间隔时间,会发生有先后,不能同步了,各位兄弟帮帮我吧!!看看该如何实现?用别的方式能够实现也请赐教,先谢谢你们!
//<div id="scroll_div"style="overflow: hidden;width:100%; height:110px; margin:0px; padding:0px;">
    //          <div id="scroll_begin">
      <asp:datagrid id="etw_p" runat="server" AutoGenerateColumns="False" GridLines="None" ShowHeader="False" AllowPaging="True"   PageSize="6"  >
          <Columns>
          <asp:TemplateColumn>
            <ItemTemplate>
         产品种类:  <%#Eval("CategoryName") %>
                <asp:datalist id="etw_pro" runat="server" datasource='<%# DataBinder.Eval(Container, "DataItem.myrelation") %>' RepeatColumns="2" RepeatLayout="Flow">
                  <itemtemplate>
                       a href="showproducts.aspx?id=<%#Eval("productid")%>"> 
                        #Eval("productName") %>
                   </itemtemplate>
                </asp:datalist>
            </ItemTemplate>
          </asp:TemplateColumn>
          </Columns>
        </asp:datagrid>
// </div>
         //   <div id="scroll_end"></div>
   // </div>
其中注释部分为滚动实现的代码:
 <%--<script language="javascript" type="text/javascript">
            var scroll_end = document.getElementById("scroll_end");
            var scroll_begin=document.getElementById("scroll_begin");
            var speed=20
            scroll_end.innerHTML=scroll_begin.innerHTML
            function Marquee()
            {
                    if(scroll_end.offsetHeight-scroll_div.scrollTop<=0)
                    {
                        scroll_div.scrollTop-=scroll_begin.offsetHeight
                         scrollToppx();
                    }
                    else
                    {
                        scroll_div.scrollTop++;
                        scrollToppx();
                    }       
            }
            function scrollToppx()
            {
                if((scroll_div.scrollTop%30)==0)
                {
                    Pause();
                }
                else if(scroll_div.scrollTop==0)
                {
                    Pause();
                }
            }
            var MyMar=setInterval(Marquee,speed)
            function Pause()
            {
                    clearInterval(MyMar);
                    MyMar=null;
                  
                    setTimeout("Start();",1000);
            }
            function Start()
            {
                 MyMar=setInterval(Marquee,speed)
            }
</script>--%>