重生之凰城嫡后:scrollLeft,scrollTop,滚动代码的总结 盒子模式

来源：百度文库 编辑：九乡新闻网 时间：2024/04/27 20:15:28

scrollLeft,scrollTop,滚动代码的总结

今天和兄弟一起研究了一下横向和竖向图片滚动的代码，很兴奋，因为解决了几个小问题
第一个：
 for(var i=1;i<50;i++)
     {
          document.getElementById("TextBox1").scrollTop++;
          document.getElementById("TextBox1").scrollLeft++;
      }
我刚开始的时候写成了
 for(int i=1;i<50;i++)
     {
          //document.getElementById("TextBox1").scrollTop++;
          document.getElementById("TextBox1").scrollLeft++;
      }
IE提示错误，Exception ;我半天不知道怎么回事，最后才发现是犯了个很低级的错误，javascript中的
变量用var定义，可以不定义！
下面入正题
clientHeight
大家对 clientHeight 都没有什么异议，都认为是内容可视区域的高度，也就是说页面浏览器中可以看
到内容的这个区域的高度。

offsetHeight
IE、Opera 认为 offsetHeight = clientHeight + 滚动条 + 边框。
NS、FF 认为 offsetHeight 是网页内容实际高度，可以小于 clientHeight。

scrollHeight
IE、Opera 认为 scrollHeight 是网页内容实际高度，可以小于 clientHeight。
NS、FF 认为 scrollHeight 是网页内容高度，不过最小值是 clientHeight。

简单地说
clientHeight 就是透过浏览器看内容的这个区域高度。
NS、FF 认为 offsetHeight 和 scrollHeight 都是网页内容高度，只不过当网页内容高度小于等于
 clientHeight 时，scrollHeight 的值是 clientHeight，而 offsetHeight 可以小于 clientHeight。
IE、Opera 认为 offsetHeight 是可视区域 clientHeight 滚动条加边框。
scrollHeight 则是网页内容实际高度。

同理
clientWidth、offsetWidth 和 scrollWidth 的解释与上面相同，只是把高度换成宽度即可。

说了半天还是给个图吧

 

那么当容器如div中的table的宽大与定义的div的宽的时候，这个时候ScrollLeft++是可以起作用的！
example

 

Code

    
    
        
        aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
        
        

    
  function scrolltop1()
  {
     for(var i=1;i<50;i++)
     {
          document.getElementById("TextBox1").scrollTop++;
          document.getElementById("TextBox1").scrollLeft++;
      }
  window.alert(document.getElementById("TextBox1").scrollTop);
  window.alert(document.getElementById("TextBox1").scrollWidth);
  window.alert(document.getElementById("TextBox1").scrollLeft);
  }
    
    

 

 

而这里的 document.getElementById("TextBox1").scrollTop++;是不能起作用的！为什么呢？因为他的容器的
高scrollHeight不大于定义的 中的50px
如果大于就可以起作用了，如

   


   

      
       
        fghdsfgfdgdf
guj
       

   
   

这个时候，scrollleft和scrolltop都是可以起作用的，这里给我们一起提示
要想用这两个家伙就必须把实际的内容弄得多于定义的容器的width和height

下面给出横向移动的代码

 

Code






 
 
 
 



 





 
var speed=30 ;
//marquePic2.innerHTML=marquePic1.innerHTML; 
function Marquee(){ 
 if(demo.scrollLeft>=marquePic1.scrollWidth){ 
  demo.scrollLeft=0; 
 }
 else{ 
  demo.scrollLeft++;
 } 
} 
var MyMar=setInterval(Marquee,speed);
 demo.onmouseover=function() {
 clearInterval(MyMar);
} 
demo.onmouseout=function() {
 MyMar=setInterval(Marquee,speed);
} 

 

在给出竖向移动的代码

 

Code