问题描述

js 滚动，滚动那么3次就停止滚动了，什么原因呢，是height的吗

   <div class="newsCom" >
                     <div class="seTit" ><span >最新加盟TOP10</span></div>
                <div >&nbsp;</div>
               <div id="maq" style="overflow: hidden; height: 540px;margin-top:-15px;" align="center">
                    <div id="mtext"  align="center" style="text-align:center;">
           <asp:DataList ID="dtImgCom" runat="server"  CellPadding="0" CellSpacing="0"   border="0"   >
                        <ItemStyle HorizontalAlign="Center" />
                        <ItemTemplate >
                               <img src='ResizeImage.ashx?src=<%#Eval("imgSRC").ToString().Replace("../","") %>&width=140&height=100'   oncontextmenu="return false" onselectstart="return false"  />
                             <div style=" text-align:center;font-size:14px;">
                                   <%#Eval("departName") %></div>
                            <div>&nbsp;</div>

                        </ItemTemplate>
             </asp:DataList>
   </div>
                  <div id="m0"> </div>
 </div>
                      <script language="javascript">
                          function imgdragstart() { return false; }
                          function imgdragstart2() { return false; }
    </script>
         <script language="javascript" type="text/javascript">
             var speed = 42  //设置滚动速度
             m0.innerHTML = mtext.innerHTML
             function Marquee() {
                 if (m0.offsetTop - maq.scrollTop <= 0)
                     maq.scrollTop -= mtext.offsetHeight
                 else {
                     maq.scrollTop++
                 }
             }
             var MyMar = setInterval(Marquee, speed)
             maq.onmouseover = function () { clearInterval(MyMar) }
             maq.onmouseout = function () { MyMar = setInterval(Marquee, speed) }
</script>
                <script language="javascript" type="text/javascript">
                    for (i in document.images) document.images[i].ondragstart = imgdragstart;
</script>
            </div>

解决方案

因为你的if (m0.offsetTop - maq.scrollTop <= 0)这个条件永远不会成立。。m0.offsetTop（到视窗的顶部的高度）是不会变的，而maq.scrollTop只能增长到maq.scrollHeight-容器可见高，你在增加scrollTop也是不会变的

    var m0 = document.getElementById('m0'),mtext=document.getElementById('mtext'),maq=document.getElementById('maq');
             var speed = 42  //设置滚动速度
             m0.innerHTML = mtext.innerHTML
             console.log(m0.offsetTop )
             function Marquee() {
                 if (maq.scrollHeight-maq.offsetHeight- maq.scrollTop <= 0) {
                     maq.scrollTop = 0;
                 }
                 else {
                     maq.scrollTop++
                 }
                 document.title = maq.scrollTop+"|"+m0.offsetTop
             }
             var MyMar = setInterval(Marquee, speed)
             maq.onmouseover = function () { clearInterval(MyMar) }
             maq.onmouseout = function () { MyMar = setInterval(Marquee, speed) }